React Router v6 引入了一個?Routes?組件，它有點像?Switch?，但功能要強大得多。與?Switch?相比，?Routes?的主要優勢在于：

• <Routes>?中的所有?<Route>?和?<Link>?都是相對的。這導致在?<Route path>?和?<Link to>?中的代碼更精簡和更可預測。
• 路由的選擇基于最佳匹配，而不是按順序遍歷。這避免了由于在?<Switch>?中定義較晚而導致無法到達的錯誤。
• 路由可以嵌套在一個地方，而不是分散在不同的組件中。在中小型應用程序中，這樣可以方便地一次性查看所有路由。在大型應用程序中，您仍然可以通過?React.lazy?動態加載將路由嵌套在打包中。

v6，您需要將所有?<Switch>?元素轉換為?<Routes>?。

首先，讓我們來談談 v6 中的相對路由和鏈接。

v5 是這樣寫：

// This is a React Router v5 app
import {BrowserRouter,Switch,Route,Link,useRouteMatch,
} from "react-router-dom";function App() {return (<BrowserRouter><Switch><Route exact path="/"><Home /></Route><Route path="/users"><Users /></Route></Switch></BrowserRouter>);
}function Users() {// In v5, nested routes are rendered by the child component, so// you have <Switch> elements all over your app for nested UI.// You build nested routes and links using match.url and match.path.let match = useRouteMatch();return (<div><nav><Link to={`${match.url}/me`}>My Profile</Link></nav><Switch><Route path={`${match.path}/me`}><OwnUserProfile /></Route><Route path={`${match.path}/:id`}><UserProfile /></Route></Switch></div>);
}

v6需要這個樣子：

// This is a React Router v6 app
import {BrowserRouter,Routes,Route,Link,
} from "react-router-dom";function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="users/*" element={<Users />} /></Routes></BrowserRouter>);
}function Users() {return (<div><nav><Link to="me">My Profile</Link></nav><Routes><Route path=":id" element={<UserProfile />} /><Route path="me" element={<OwnUserProfile />} /></Routes></div>);
}

v5 應用程序中的所有?<Route children>?在 v6 中都變為了?<Route element={}>

對于子路由，index設置為true時，相當于一個默認的子路由

關于?<Route path>?模式的注意事項?

React Router v6 使用簡化的路徑格式。在 v6 中，?<Route path>?只支持兩種占位符：動態?:id?樣式的參數和?*?通配符。?*?通配符只能在路徑末尾使用，不能在中間使用。

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

在 v6 中，無論當前 URL 如何，?<Link to="me">?都會呈現相同的?<a href>?。?

使用useRoutes代替react-router-config?

v5 版本的?react-router-config?包中的所有功能都已移至 v6 的核心中。如果您喜歡/需要將路由定義為 JavaScript 對象，而不是使用 React 元素，那么您一定會喜歡這個功能。

function App() {let element = useRoutes([// These are the same as the props you provide to <Route>{ path: "/", element: <Home /> },{ path: "dashboard", element: <Dashboard /> },{path: "invoices",element: <Invoices />,// Nested routes use a children property, which is also// the same as <Route>children: [{ path: ":id", element: <Invoice /> },{ path: "sent", element: <SentInvoices /> },],},// Not found routes work as you'd expect{ path: "*", element: <NotFound /> },]);// The returned element will render the entire element// hierarchy with all the appropriate context it needsreturn element;
}

使用useNavigate代替useHistory?

React Router v6 引入了新的導航 API，該 API 與?<Link>?同義，可更好地兼容啟用了懸念的應用程序。根據您的風格和需求，我們提供了該 API 的命令式和聲明式版本。

useHistory?更改為?useNavigate?，并更改?history.push?或?history.replace?調用站點。

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";function App() {let navigate = useNavigate();function handleClick() {navigate("/home");}return (<div><button onClick={handleClick}>go home</button></div>);
}

注意：請注意，v5 版?<Redirect />?默認使用?replace?邏輯（可通過?push?屬性進行更改），而 v6 版?<Navigate />?默認使用?push?邏輯，可通過?replace?屬性進行更改。