目录
一、页面路由
1、什么是页面路由
路由就是一种映射关系，前端路由就是根据不同的url去切换不同的组件，简单理解就是可以从一个页面跳转到另一个页面，前端路由就是通过一套url路径 与 组件的对应关系，后端路由就是根据用户不同的请求去返回不同的内容。
2、页面路由的两种方式
(1)hash模式：在url后带#
缺点：传递参数的方式是在url后拼接,会有体积的限制(2)history模式：
A、可以传递复杂的参数 BrowserRoute
B、可以监听浏览器的前进、后退事件(back、forward、go)
二、路由的基本使用
1、安装 react-router-dom 模块
npm install react-router-dom 2、实现路由模式的组件
实现路由模式的组件：(最外层)：决定路由模式
- HashRouter组件：实现hash模式的路由
- BrowserRouter组件：实现history模式的路由
// hash模式
ReactDOM.render(
<HashRouter>
<Route path="/" component={Home}/>
</HashRouter>
)// history模式
ReactDOM.render(
<BrowserRouter>
<Route path="/" component={Home} />
</BrowserRouter>
)【注意】：其实就是路由的hash和history两种模式，并且这两个组件是路由的容器，必须在最外层
3、Route 组件
Route组件：实现路径和显示组件之间的映射
<Route path="/users" component={组件} render={返回dom} location="route对象" exact="匹配规则"/> 若用render渲染dom，就不需要component
exact的默认值为false，若设置为true则表示精确匹配
4、Router 组件
低级路由，适用于任何路由组件，主要和redux深度集成，使用必须配合history对象,使用Router路由的目的是和状态管理库如redux中的history同步对接
<Router history={history}>
...
</Router>5、Link和NavLink组件
类似于<a>标签
- Link组件的api属性：
<Link to="" />
to属性表示目标页面的路径
- NavLink组件的api属性：包含了Link组件的所有api,在Link组件的基础上进行了扩展
(1)Link的api
- to： 有两种写法，表示跳转到哪个路由
- 字符串写法
<Link to="/a" />- 对象写法
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>- replace：就是将push改成replace
- innerRef：访问Link标签的dom
- Link的所有api
- activeClassName 路由激活的时候设置的类名
- activeStyle 路由激活设置的样式
- exact 参考Route，符合这个条件才会激活active类
- strict 参考Route，符合这个条件才会激活active类
- isActive 接收一个回调函数，active状态变化的时候回触发，返回false则中断跳转
const oddEvent = (match, location) => {
console.log(match,location)
if (!match) {
return false
}
console.log(match.id)
return true
}
<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>- location 接收一个location对象，当url满足这个对象的条件才会跳转
<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>6、Redirect：页面重定向
// 基本的重定向
<Redirect to="/somewhere/else" />// 对象形式
<Redirect
to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/>// 采用push生成新的记录
<Redirect push to="/somewhere/else" />// 配合Switch组件使用，form表示重定向之前的路径，如果匹配则重定向，不匹配则不重定向
<Switch>
<Redirect from='/old-path' to='/new-path'/>
<Route path='/new-path' component={Place}/>
</Switch>7、Switch
路由切换，只会匹配第一个路由，可以想象成tab栏
Switch内部只能包含Route、Redirect、Router
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>8、withRouter
当一个非路由组件也想访问到当前路由的match,location,history对象，那么withRouter将是一个非常好的选择，可以理解为将一个组件包裹成路由组件
import { withRouter } from 'react-router-dom'
const MyComponent = (props) => {
const { match, location, history } = this.props
return (
<div>{props.location.pathname}</div>
)
}
const FirstTest = withRouter(MyComponent);9、Router Hooks
在Router5.x中新增加了Router Hooks用于在函数组件中获取路由信息。使用规则和React的其他Hooks一致。
（1）useHistory：返回history对象
（2）useLocation：返回location对象
（3）useRouteMatch：返回match对象
（4）useParams：返回match对象中的params，也就是path传递的参数
import React from ‘react’;
import { useHistory } from ‘react-router-dom’;
function backBtn(props) {
let history = useHistory;
return <button onClick={ ()=> {
history.goBack();
}>返回上一页</button>
}10、404视图
既然路由就需要考虑一个问题---404视图。当用户访问一些不存在的URL时就该返回404视图了，但不存在的地址该如何匹配呢？----使用Switch
Switch组件的作用类似于JS中的switch语句，当一项匹配成功之后，就不再匹配后续内容。这样的话就可以把要匹配的内容写在Switch组件中，最后一项写404视图，当其他都匹配不成功时就是404视图。例如：
<Switch>
<Route exact={true} path={"/"} component={Home}/>
<Route path={"/about"} component={About}/>
<Route path={"/topics"} component={Topics}/>
<Route component={View404}/>
</Switch>