ReactRouter基础
本质上react-router有三个模块，react-router、react-router-dom、react-router-native
在React项目中，路由实现需要使用react-router-dom模块
react-router安装/使用
# npm
npm i --save react-router-dom
# yarn
yarn add react-router-dom
我们需要在我们的项目中引入react-router-dom
import {
BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
BrowserRouter/HashRouter
如果我们要使用路由，那么应该在App.js中用BrowserRouter包着所有的代码
前者路由url中不带#，后者带#
BrowserRouter基于HTML5的pushState操作，HashRouter基于hash操作
一个页面只会有一个Router
import {
BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
function App () {
return (
<div className="app">
<Router>
</Router>
</div>
)
}
Route
每一个路由都放在一个Route里
ute path="路由路径">
<Component a={
1}></Component>
</Route>
<!-- 第二种写法 -->
<Route path="路由路径" component={
组件}></Route>
<!-- 第三种写法 -->
<Route path="路由路径" render={
(props) => <Component {
...props} a={
1}></Component>}></Route>
</Router>
上面的三种方式区别在于组件内部的props的内容
function Page (props) {
// 第一种方式 props中只能获取到我们添加到组件上的自定义属性
// 第二种方式 props中包含了所有的路由信息 不包含自定义属性，也无法设置
// 第三种方式 porps默认为空，可以添加自定义属性，如果想要有路由信息，需要我们设置对应props传递
return (
<div></div>
)
}
exact
精确匹配，如果不添加该属性 path=“/” 也会匹配到 /xxx，可以给Route添加该属性
<Route exact></Route>
Switch
如果Route的path和url匹配，则对应的Route的组件就会渲染，Switch控制了Route只能渲染匹配到的第一个。
<Router>
<Switch>
<Route path="路由路径">
<Component></Component>
</Route>
<!-- 第二种写法 -->
<Route path="路由路径" component={
组件}></Route>
<!-- 第三种写法 -->
<Route path="路由路径" render={
() => <Component></Component>}></Route>
</Switch>
</Router>
Link
会被渲染成a标签，和vue的router-link相同
<Link to="path">链接名称</Link>
NavLink
和Link的区别在于NavLink会根据当前URL匹配对应的a标签添加类名 active
<NavLink to="path">链接名称</NavLink>
路由配置
如果想要像vue一样实现路由的配置，我们可以自己写配置，并根据配置渲染出对应的路由结构
安装 react-router-dom
npm install react-router-dom -S
// 或者
yarn add react-router-dom
配置好routes
const routes = [
// 同级重定向
{
path: "/redirect",
render: () => <Redirect to="/demo1"/>
},
{
path: "/",
exact: true,
component: Index
}, {
path: "/demo1",
component: Demo1,
// 子路由配置
routes: [
{
path: "/demo1/child1",
component: Child1
},
// 重定向 父 -> 子
{
path: "/demo1",
render: () => <Redirect to="/demo1/child1"/>
}
]
}
]
在App.js中添加函数
import {
BrowserRouter as Router } from 'react-router-dom'
import {
renderRoutes } from 'react-router-config'
import routes from '路由配置路径'
function App () {
return (
<div className="App">
<Router>
{
renderRoutes(routes)}
</Router>
</div>
)
}
找到有子路由的组件
import {
renderRoutes } from 'react-router-config'
function 组件名 ({
route}) {
return (
<div>
{
renderRoutes(route.routes)}
</div>
)
}
组件懒加载
组件的配置
组件需要放在lazy中调用
FuntionComponent.js
function FuctionComponent () {
return (
<div>组件</div>
)
}
export default FunctionComponent
懒加载
import {
Lazy } from 'react'
const FunctionComponent = Lazy(() => import('组件路径'))
把通过Lazy引入的组件放在对应的组件中
Suspense组件可以去包裹Lazy加载的组件，内部可以包裹多个
<Suspense fallback={
<div>loading...</div>}>
<Lazy组件></Lazy组件>
</Suspense>
在组件外使用路由导航功能
假如我们需要在组件外使用history进行路由导航。比如：在响应拦截器中遇到token失效跳转登录页的场景
安装模块react-router和history
yarn add react-router history
到App.js进行结构改造
App.sj
import './App.css';
// import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import {
Route, Switch, Redirect} from 'react-router-dom'
// 从上一步安装的模块中，引入对应的Router
import {
Router } from 'react-router'
// 引入创建history对象方法
import {
createBrowserHistory } from 'history'
import Login from './views/Login';
import MainLayout from './views/Layout';
import NotFound from './views/NotFound';
// 创建history对象 并且导出 在需要进行导航的地方引入并调用方法即可
export const history = createBrowserHistory()
function App() {
return (
<div className="App">
{
/* 把创建的history对象添加到Router上 */}
<Router history={
history}>
...
</Router>
</div>
);
}
export default App;