原博 ： https://blog.csdn.net/FengZi_00/article/details/122127889

react-router-dom從V5升級到V6後，有些使用做了一些改變：

1. <Switch>重新命名為<Routes>。
2. <Route>的新特性變更。
3. 巢狀路由變得更簡單。
4. 用useNavigate代替useHistory。
5. 新鉤子useRoutes代替react-router-config。

(1) Switch 重新命名為 Routes

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>
 
//
 
 v6 
import { HashRouter, Route, Routes } from "react-router-dom"; 
 <div className="App">
      <HashRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/test" element={<Test />} />
        </Routes>
      </HashRouter>
  </div>
 

(2) Route 的新特性變更 ,component/render被element替代

import Profile from './Profile';
 
// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>
 
// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true
 
} />} />
 

(3) 巢狀路由變得更簡單

具體變化有以下：

1. Route children 已更改為接受子路由。
2. 比Route exact 和 Route strict更簡單的匹配規則。
3. Route path 路徑層次更清晰。

v5 中的巢狀路由必須非常明確定義，且要求在這些元件中包含許多字串匹配邏輯.

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}
 
function Profile() {
  let { path, url } = useRouteMatch();
  
  return (
    <div>
      <nav>
        <Link to={`${url}/me`}>My Profile</Link>
      </nav>
 
      <Switch>
        <Route path={`${path}/me`}>
          <MyProfile />
        </Route>
        <Route path={`${path}/:id`}>
          <OthersProfile />
        </Route>
      </Switch>
    </div>
  );
}

v6 中，你可以刪除字串匹配邏輯。不需要任何 useRouteMatch()

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}
 
function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
 
      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}

當然，還有更酸爽的操作，直接在路由裡定義的，然後用接下來的一個新API：Outlet

新API:Outlet

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
 
function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
        {/* 將直接根據上面定義的不同路由引數，渲染<MyProfile /> 或 <OthersProfile /> */}
      <Outlet />
    </div>
  )
}

多個 Routes

以前，我們只能在 React App 中使用一個 Routes。但是現在我們可以在 React App 中使用多個路由，這將幫助我們基於不同的路由管理多個應用程式邏輯。

import React from 'react';
import { Routes, Route } from 'react-router-dom';
 
function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}

(4) 用 useNavigate 代替 useHistory

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

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

history的用法也將被替換成navigate

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

(5) 新鉤子 useRoutes 代替 react-router-config

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}