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