React中的路由基础知识（一级路由），5版本的！！！

安装

npm i react-router-dom@5

路由的基本使用

1. 明确好界面中的导航区、展示区
2. 导航区的a标签改为Link标签

        <Link to="/xxxx">Demo</Link>
1

3. 展示区写Route标签进行路径匹配

        <Route path='/xxxx' component={
   Demo}>
1
2

4. index.js中 App的最外侧包裹一个BrowerRouter 或 HashRouter

createRoot(document.getElementById('root')).render( 
    <BrowserRouter>
        <App />
    </BrowserRouter>
)
1
2
3
4
5

路由组件与一般组件的区别

1. 写法不同：
   一般组件：
   路由组件：
2. 存放位置不同
   一般组件：components
   路由组件：pages
3. 接收到的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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

NavLink与封装NavLink

1. NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2. 标签体内容是一个特殊的标签属性
3. 通过this.props.children可以获取标签体内容
   
   app.jsx中

import React, {
    Component } from 'react'
import {
   Route} from 'react-router-dom'
import Header from './components/Header'  
1
2
3
4