1、安裝依賴

npm i react-router-dom

2、引入實現(xiàn)路由所需的組件赚楚，以及頁面組件

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Foo from './Foo';
import Bar from './Bar';

function App(){
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/foo' element={Foo} />
                <Route path='/bar' element={Bar} />
            </Routes>
        </BrowserRouter>
    )
}

注意：BrowserRouter組件最好放在最頂層所有組件之外，這樣能確保內(nèi)部組件使用Link做路由跳轉(zhuǎn)時不出錯

3煌恢、Switch 重命名為Routes (用法如上)

4骇陈、路由跳轉(zhuǎn)

在跳轉(zhuǎn)路由時，如果路徑是/開頭的則是絕對路由瑰抵，否則為相對路由你雌，即相對于“當前URL”進行改變

5、Link組件

Link組件只能在Router內(nèi)部使用二汛，因此使用到Link組件的組件一定要放在頂層的Router之內(nèi)

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

<Link to='foo'>to foo</Link>

6婿崭、NavLink組件

• NavLink組件和Link組件的功能是一致的，區(qū)別在于可以判斷其to屬性是否是當前匹配到的路由
• NavLink組件的style或className可以接收一個函數(shù)肴颊，函數(shù)接收一個isActive參數(shù)氓栈，可根據(jù)該參數(shù)調(diào)整樣式

import { NavLink } from 'react-router-dom';

function Foo(){
    return (
        <NavLink
            style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) }
        >Click here</NavLink>
    )
}

7、Outlet (渲染任何匹配的子級路由頁面)

管理端（后臺）項目用這個api較為常見

return (
        <div className="A">
          <h3>我是A組件 --------- 編程式路由導(dǎo)航使用示例</h3>
          <div className="A-navBox">
            <Button type="primary" onClick={() => navigateRouter(1, 1, "i am Jason Ma")}>
              params傳參
            </Button>
            <Button onClick={() => navigateRouter(2, 18, "i am Jason Ma")}>search傳參</Button>
            <Button type="dashed" onClick={() => navigateRouter(3, 999, "i am Jason Ma")}>
              state傳參
            </Button>
          </div>

          {/* 渲染任何匹配的子級路由頁面 */}
          <Outlet></Outlet>
        </div>
  );

8婿着、獲取params參數(shù)

• 在Route組件中的path屬性中定義路徑參數(shù)
• 在組件內(nèi)通過useParams hook訪問路徑參數(shù)

<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>

import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

在以前版本中授瘦，組件的props會包含一個match對象，在其中可以取到路徑參數(shù)竟宋。但在最新的6.x版本中提完，無法從props獲取參數(shù)。

并且丘侠，針對類組件的withRouter高階組件已被移除氯葬。因此對于類組件來說，使用參數(shù)有兩種兼容方法：

1.將類組件改寫為函數(shù)組件
2.自己寫一個HOC來包裹類組件婉陷，用useParams獲取參數(shù)后通過props傳入原本的類組件

9帚称、編程式路由導(dǎo)航用useNavigate代替useHistory（JS路由跳轉(zhuǎn)）

使用useNavigate鉤子函數(shù)生成navigate對象，可以通過JS代碼完成路由跳轉(zhuǎn)秽澳，不可以在類組件中使用useNavigate函數(shù)闯睹，可以改成函數(shù)組件或者在外包裹一層withRouter來解決

// v5
import { useHistory } from 'react-router-dom';
 
 
function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

現(xiàn)在，history.push()將替換為navigation()：

// v6
import { useNavigate } from 'react-router-dom';
 
 
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

history的用法也將被替換成：

// v5
history.push('/home');
history.replace('/home');
 
 
// v6
navigate('/home');
navigate('/home', {replace: true});

10担神、search參數(shù)

• 查詢參數(shù)不需要在路由中定義
• 使用useSearchParams hook來訪問查詢參數(shù)楼吃。其用法和useState類似，會返回當前對象和更改它的方法
• 更改searchParams時妄讯，必須傳入所有的查詢參數(shù)孩锡，否則會覆蓋已有參數(shù)

import { useSearchParams } from 'react-router-dom';

// 當前路徑為 /foo?id=12
function Foo(){
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    setSearchParams({
        name: 'foo'
    }) // /foo?name=foo
    return (
        <div>foo</div>
    )
}

11、默認路由

定義： 在嵌套路由中亥贸，如果URL僅匹配了父級URL躬窜，則Outlet中會顯示帶有index屬性的路由

<Routes>
    <Route path='/foo' element={Foo}>
        <Route index element={Default}></Route>
        <Route path='bar' element={Bar}></Route>
    </Route>
</Routes>

• 當url為/foo時：Foo中的Outlet會顯示Default組件
• 當url為/foo/bar時：Foo中的Outlet會顯示為Bar組件
• 注意：目前我的index無法設(shè)置默認子路由（可以用Navigite重定向?qū)崿F(xiàn)類似的默認功能，需要默認的路由設(shè)置一個指向子路由的重定向炕置，但是體驗會差一點荣挨，有點頓）

12栅受、全匹配路由

定義： path屬性取值為*時栋艳，可以匹配任何（非空）路徑，同時該匹配擁有最低的優(yōu)先級梭姓∥蠹可以用于設(shè)置404頁面崭孤。

<Routes>
    <Route path='/foo' element={Foo}>
        <Route path='bar' element={Bar}></Route>
        <Route path='*' element={NotFound}></Route>
    </Route>
</Routes>

13胀溺、多組路由

通常厘唾，一個應(yīng)用中只有一個Routes組件。

但根據(jù)實際需要也可以定義多個路由出口（如側(cè)邊欄和主頁面都要隨URL而變化）

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>

14鹃操、重定向

當在某個路徑/a下韭寸，要重定向到路徑/b時，可以通過Navigate組件進行重定向到其他路徑
等價于以前版本中的Redirect組件

import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}