1.安裝路由：npm i react-router-dom
2.包裹根組件（index.js，若不在根組件包裹，路由聲明和跳轉(zhuǎn)的時候都要包裹）

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：映射第一個，匹配到一個以后就不繼續(xù)匹配了，性能更好
//replace：路由跳轉(zhuǎn)使用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傳參（動態(tài)路由）
<Link to={`/about/news/${param1}/${param2}`}>test<Link/> //聲明式導(dǎo)航
this.props.history.push(`/about/news/${param1}/${param2}`) //編程式導(dǎo)航（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參數(shù)
const params = this.props.match.params
//接受search參數(shù)（接收到的是一個 '?id=123&name=zhangsan' 字符串，需要使用quprystring庫來解析，react-router-dom已經(jīng)幫我們下載好，直接引入使用，qs.parse('')）
const search = this.props.location 
//接受state參數(shù)
const state = this.props.location.state

6.一般路由組件想要使用路由組件api進行跳轉(zhuǎn)的時候，需要使用withRouter轉(zhuǎn)成路由組件

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的區(qū)別：

1.底層原理不一樣：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表現(xiàn)形式不一樣：
BrowserRouter的路徑中沒有#，例如：localhost:3000/demo
HashRouter的路徑中沒有#，例如：localhost:3000/#/demo
3.刷新后對路由state參數(shù)的影響
BrowserRouter沒有任何影響，因為state保存在history對象中
HashRouter刷新后會導(dǎo)致路由state參數(shù)丟失
4.HashRouter可以用于解決一些路徑錯誤相關(guān)的問題。

reactRouter6與reactRouter5的區(qū)別（建議使用函數(shù)式組件）

1.Switch標簽變成Routes，且必須使用
2.Route標簽的component屬性變成element

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

3.路由跳轉(zhuǎn)不再用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='/'>父應(yīng)用</Link><br />
      <Link to='/react-app'>react子應(yīng)用</Link><br />
      <Link to='/vue-app'>vue子應(yīng)用</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來接收路由參數(shù)