安装
npm i react-router-dom@5
路由的基本使用
- 明确好界面中的导航区、展示区
- 导航区的a标签改为Link标签
<Link to="/xxxx">Demo</Link>
- 展示区写Route标签进行路径匹配
<Route path='/xxxx' component={
Demo}>
- index.js中 App的最外侧包裹一个BrowerRouter 或 HashRouter
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
)
路由组件与一般组件的区别
- 写法不同：
一般组件：<Demo/>
路由组件：<Route path="/about" component={About}/> - 存放位置不同
一般组件：components
路由组件：pages - 接收到的props不同
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：能接收到三个固定的属性
history:
go:f go(n)
goBack:f goBack()
goForward:f goForward()
push:f push(path,state)
replace:f replace(path,state)
location:
pathname:"/about"
search:""
state:undefined
match:
params:{
}
path:"/about"
url:"/about"
NavLink与封装NavLink
- NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
- 标签体内容是一个特殊的标签属性
- 通过this.props.children可以获取标签体内容
app.jsx中
import React, {
Component } from 'react'
import {
Route} from 'react-router-dom'
import Header from './components/Header' //一般组件
import Home from './pages/Home' //路由组件
import About from './pages/About' //路由组件
import MyNavLink from './components/MyNavLink'
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header></Header>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{
/* 在React中靠路由链接实现切换组件 ----编写路由链接*/}
{
/* activeClassName用于定义动态切换按钮的样式，默认是active可以不写，如果不是active需要写 */}
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{
/* 注册路由 */}
<Route path="/about" component={
About}/>
<Route path="/home" component={
Home}/>
</div>
</div>
</div>
</div>
</div>
)
}
}
MyNavLink(一般组件)------>index.jsx(封装NavLink)
import React, {
Component } from 'react'
import {
NavLink} from 'react-router-dom'
// 二次封装NavLink，减少标签属性
export default class MyNavLink extends Component {
render() {
// console.log(this.props)
return (
// 标签体内容是一个特殊的属性，也可以使用this.props传过来，this.props.children就是标签体内容
<NavLink activeClassName='demo' className="list-group-item" {
...this.props}/>
)
}
}
Switch的使用
- 通常情况下，path和component是一一对应的关系
- Switch可以提高路由匹配效率
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header></Header>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{
/* 注册路由 */}
{
/* Switch的使用，可以提高路由匹配效率，匹配到了就不继续往下匹配，出现两个一样的路径，只展示先出现的 */}
<Switch>
<Route path="/about" component={
About}/>
<Route path="/home" component={
Home}/>
<Route path="/home" component={
Test}/>
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
解决样式丢失的问题
- public/index.html 中 引入样式时不写 ./ 写 /（常用）
- public/index.html 中 引入样式时不写 ./写 %PUBLIC_URL% (常用)
- 使用HashRouter，因为hash方式#后面的内容不会带给服务器
路由的严格匹配与模糊匹配
- 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路劲】，且顺序一致）
- 开启严格匹配：
<Route exact={
true} path="/about" component={
About}/>
- 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header></Header>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home/a/b">Home</MyNavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{
/* 注册路由 */}
<Switch>
{
/* exact用来开启严格匹配，开启严格匹配路径必须一致，一般不轻易开启，开启exact第二个home路径渲染不出页面 */}
<Route exact={
true} path="/about" component={
About}/>
<Route exact={
true} path="/home" component={
Home}/>
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
Redirect的使用
- 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
- 具体编码：
<Switch>
<Route path="/about" component={
About}/>
<Route path="/home" component={
Home}/>
{
/* Redirect 是重定向，写在所有路由最下方，当所有路由都无法匹配时，跳转到About*/}
<Redirect to="/about"/>
</Switch>