1.安装路由：npm i react-router-dom
2.包裹根组件（index.js，若不在根组件包裹，路由声明和跳转的时候都要包裹）

import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter} from 'react-router-dom' //history模式
import App from './App'

ReactDom.render(
  <BrowserRouter>
    <App/>
  <BrowserRouter/>,
   document.getElementeById('root')
)

3.注册路由

import {NavLink, Switch, Route} from 'react-router-dom'
import Home from './Home'
import About from './About'

//路由链接（NavLink有高亮效果，Link没有高亮）
<NavLink to='/home'>Home<NavLink/>
<NavLink to='/about'>About<NavLink/>

//注册路由
//switch：映射第一个，匹配到一个以后就不继续匹配了，性能更好
//replace：路由跳转使用replace模式，默认push模式
//exact：精准匹配查找
<Switch>
  <Route exact path='/home' component={Home}>
  <Route replace path='/about' component={About}>
  <Redirect to='/Home'> //兜底，没有匹配的重定向
<Switch/>

4.二级路由

import {NavLink, Switch, Route} from 'react-router-dom'
import News from './News'
import Message from './Message'

//路由链接（NavLink有高亮效果，Link没有高亮）
<NavLink to='/about/news'>Home<NavLink/>
<NavLink to='/abou/message'>About<NavLink/>

//注册路由
<Switch>
  <Route exact path='/about/news' component={News}>
  <Route replace path='/abou/messaget' component={Message}>
  <Redirect to='/abou/news'> //兜底，没有匹配的重定向
<Switch/>

5.路由传参的三种方式

//params传参（动态路由）
<Link to={`/about/news/${param1}/${param2}`}>test<Link/> //声明式导航
this.props.history.push(`/about/news/${param1}/${param2}`) //编程式导航（push可以换成replace）
//search传参
<Link to={`/about/news?search1=${search1}&search2=${search2}`}>test<Link/>
this.props.history.push(`/about/news?search1=${search1}&search2=${search2}`)
//state传参
<Link to={{pathname: '/about/news', state: {id: state1, title: state2}}}>test<Link/>
this.props.history.push('/about/news', {id: state1, title: state2})

//params传参，声明路由
<Route path='/about/news/:id/:name' component={Test}>
//search传参和state传参，声明路由（正常声明即可）
<Route path='/about/news' component={Test}>

//接受params参数
const params = this.props.match.params
//接受search参数（接收到的是一个 '?id=123&name=zhangsan' 字符串，需要使用quprystring库来解析，react-router-dom已经帮我们下载好，直接引入使用，qs.parse('')）
const search = this.props.location 
//接受state参数
const state = this.props.location.state

6.一般路由组件想要使用路由组件api进行跳转的时候，需要使用withRouter转成路由组件

import React from 'react'
import {withRouter} from 'react-router-dom'
class header extends React.Component{
  render() {}
}
export default withRouter(Header)

7.路由懒加载

import {NavLink, Route} from 'react-router-dom'
import React, {Component, lazy, Suspense} from 'react-router-dom'

import Loading from './Loading'
const About = lazy(() => import('./About'))
const Home= lazy(() => import('./Home'))

export default class Demo extends Component{
  render() {
    return(
      <div>
        //路由链接（NavLink有高亮效果，Link没有高亮）
        <NavLink to='/home'>Home<NavLink/>
        <NavLink to='/about'>About<NavLink/>

        <Suspense fallback={<Loading/>}> //请求组件的时候的时候可以加一个加载中的组件
          <Route exact path='/home' component={Home}>
          <Route replace path='/about' component={About}>
        <Suspense>
      </div>
    )
  }
}

注：

-路由的其他api：this.props.history.goBack()、this.props.history.goForward()、this.props.history.go()

-BrowserRouter与hashRouter的区别：

1.底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样：
BrowserRouter的路径中没有#，例如：localhost:3000/demo
HashRouter的路径中没有#，例如：localhost:3000/#/demo
3.刷新后对路由state参数的影响
BrowserRouter没有任何影响，因为state保存在history对象中
HashRouter刷新后会导致路由state参数丢失
4.HashRouter可以用于解决一些路径错误相关的问题。

reactRouter6与reactRouter5的区别（建议使用函数式组件）

1.Switch标签变成Routes，且必须使用
2.Route标签的component属性变成element

<Route path='/about/news/:id/:name' element={<Test />} />

3.路由跳转不再用withRouter，改成useNavigate

import { useNavigate } from 'react-router-dom'
function App() {
  let navigate= useNavigate ();
  navigate()
}

4.可以使用路由表来注册路由，使用useRoutes()，可以将路由表单独抽取出来

import { Navigate } from 'react-router-dom'
import SubReact from '../pages/SubReact'
import SubVue from '../pages/SubVue'
import Detail from '../pages/Detail'

let element = [
    {
        path: '/react-app',
        element: <SubReact />,
        children: [
            {
                path: 'detail',
                element: <Detail />,
            }
        ]
    },
    {
        path: '/vue-app',
        element: <SubVue />  
    },
    {
        path: '/',
        element: <Navigate to="/react-app" />  
    }
]
export default element

import logo from './logo.svg';
import './App.css';
import { Link, useRoutes } from 'react-router-dom';
import routes from './routes';

function App() {
  // 注册路由表
  let element = useRoutes(routes);
  return (
    <div className="base-App">
      <Link to='/'>父应用</Link><br />
      <Link to='/react-app'>react子应用</Link><br />
      <Link to='/vue-app'>vue子应用</Link><br/>
      {element}
    </div>
  );
}

export default App;

5.使用Outlet标签来指定子路由组件显示的位置，类似vue里面的<router-view/>

import { Link, Outlet } from 'react-router-dom';

export default function SubReact() {
    return (
      <div>
        react子组件
        <Link to='detail'>二级路由</Link>
        <Outlet />
      </div>
    )
}

6.使用useParams、useSearchParams、useLocation来接收路由参数