1.安装路由的插件
npm i react-router-dom@5.3.0
2.导入包并使用
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom'
3.使用HashRouter包裹整个应用,一个项目中只会有一个Router
import React from 'react'
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from 'react-router-dom'
export default function App () {
return (
<Router>
<div className="app">
<link to="/login" />
<NavLink to="/layout">
<Switch>
<Route path="/login" exact component={Login} />
<Route path="/layout" component={Layout} />
{/* 增加一个404 */}
<Redirect form="/" exact to="/login" />
<Route component={NotFound} />
</Switch>
</div>
</Router>
)
}
4.link和NavLink的区别
link和NavLink最后都会被解析成a标签。但是NavLink会当前点击的哪一项会拥有类名
5.route的作用和格式
作用:决定路由匹配规则
格式:
<Route path="/xx/xx" component={组件}></Route>
6.
exact 会实现精准匹配
<Route path="/login" exact component={Login} />
7.Switch与404
用Switch组件包裹多个Route
组件。
在Switch
组件下,不管有多少个Route的路由规则匹配成功,都只会渲染第一个匹配的组件
<Switch>
<Route path="/login" exact component={Login} />
<Route path="/layout" component={Layout} />
<Redirect form="/" exact to="/login" />
<Route component={NotFound} />
</Switch>
8.页面跳转 Redirect
作用:比如匹配根路径 我就让他跳转到某一个路由
简而言之就是 你从根路径来我就让你去哪个路径
<Redirect from="/" exact to="/comment" />
9.匹配全部
不写path 除了以上页面就会匹配这个页面 一般适用去404
<Route component={NotFound} />