安装
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>