\u7531\u4e8e\u4e4b\u524d\u7684\u9879\u76ee\u4e00\u76f4\u4f7f\u7528\u7684\u662fV5\u7248\u672c\uff0c\u6700\u65b0\u65b0\u5efa\u9879\u76ee\u7684\u65f6\u5019\uff0c\u9ed8\u8ba4\u4f7f\u7528\u7684\u662fV6\u7248\u672c\uff0c\u6839\u636e\u5b98\u65b9\u7684\u4ecb\u7ecd\uff0cV6\u7248\u672c\u7684\u65b0\u7279\u6027\u5982\u4e0b\u3002<\/p>\n
<Switch><\/code>\u91cd\u547d\u540d\u4e3a<Routes><\/code>\uff1b<\/li>\n<Route><\/code>\u7684\u65b0\u7279\u6027\u53d8\u66f4\uff1b<\/li>\n- \u5d4c\u5957\u8def\u7531\u53d8\u5f97\u66f4\u7b80\u5355\uff1b<\/li>\n
- \u65b0\u94a9\u5b50useRoutes\u4ee3\u66ffreact-router-config\uff1b<\/li>\n
- \u7528useNavigate\u4ee3\u66ffuseHistory\uff1b<\/li>\n
- Link\u4e0d\u518d\u652f\u6301component \u5c5e\u6027\uff1b<\/li>\n
- NavLink\u7684exact\u5c5e\u6027\u66ff\u6362\u4e3aend<\/li>\n
- \u5927\u5c0f\u51cf\u5c11\uff1a\u4ece20kb\u52308kb<\/li>\n<\/ul>\n
<Switch><\/code>\u91cd\u547d\u540d\u4e3a<Routes><\/code><\/h3>\n\u5728V6\u7248\u672c\u4e2d\uff0c<Switch><\/code>\u7ec4\u4ef6\u88ab\u66ff\u6362\u6210<Routes><\/code>\u7ec4\u4ef6\uff0c\u540c\u65f6\uff0ccomponent\u5c5e\u6027\u88abelement\u5c5e\u6027\u66ff\u6362\u3002<\/p>\n\/* v5 *\/\n<Switch>\n <Route exact path="\/" component={Home} \/>\n <Route path="\/user\/:id" render={(routeProps) => <User id={routeProps.match.params.id} \/>} \/>\n<\/Switch>\n\n\/* V6 *\/\n<Routes>\n <Route path="\/" element={<Home \/>} \/>\n <Route path="user\/:id" element={<User id={id} \/>} \/>\n<\/Routes><\/code><\/pre>\n\u540c\u65f6\uff0c<Route>\u7ec4\u4ef6\u8fd8\u4fee\u6539\u4e86\u5982\u4e0b\u4e00\u4e9b\u5185\u5bb9\uff1a<\/p>\n
\n- \u5e9f\u5f03exact<\/li>\n
- component\/render\u88abelement\u66ff\u4ee3<\/li>\n
- routeProps\u53ef\u4ee5\u5728element\u4e2d\u76f4\u63a5\u83b7\u53d6<\/li>\n
- \u7b80\u5316\u7684\u8def\u5f84\u5339\u914d\uff0c\u4ec5\u652f\u6301\u52a8\u6001:id\u6837\u5f0f\u53c2\u6570\u548c*\u901a\u914d\u7b26\uff0c\u4e0d\u518d\u652f\u6301RegExp<\/li>\n<\/ul>\n
\u652f\u6301\u5d4c\u5957\u8def\u7531<\/h3>\n
\u5728V6\u7248\u672c\u4e2d\uff0c <Route><\/code>\u6807\u7b7e\u652f\u6301\u5d4c\u5957\uff0c\u53ef\u4ee5\u5728\u4e00\u4e2a\u6587\u4ef6\u5185\u914d\u7f6e\u5d4c\u5957\u8def\u7531\uff0c\u4fbf\u4e8e\u7edf\u4e00\u7ba1\u7406\u8def\u7531\u3002<\/p>\nimport { HashRouter as Router, Routes, Route } from 'react-router-dom'\nimport Home from '@\/pages\/demo\/Home'\nimport Foo from '@\/pages\/demo\/Foo'\nimport Bar from '@\/pages\/demo\/Bar'\nimport BarDetail from '@\/pages\/demo\/BarDetail'\nimport '@\/assets\/style\/App.css'\nfunction App() {\n return (\n <Router>\n <Routes>\n <Route path="\/" element={<Home \/>} \/>\n <Route path="foo" element={<Foo \/>} \/>\n {\/* \u5d4c\u5957\u8def\u7531\u573a\u666f\uff1a\u9700\u8981\u5728Bar\uff08\u7236\u8def\u7531\u7684\u7ec4\u4ef6\uff09\u58f0\u660eOutlet\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6e32\u67d3\u5b50\u8def\u7531 *\/}\n <Route path="bar" element={<Bar \/>}>\n <Route path=":id" element={<BarDetail \/>} \/>\n <\/Route>\n <\/Routes>\n <\/Router>\n )\n}\nexport default App<\/code><\/pre>\nOutlet<\/h3>\n
\u5728\u5d4c\u5957\u8def\u7531\u573a\u666f\uff0c\u6211\u4eec\u9700\u8981\u5728\u7236\u8def\u7531\u4e2d\u4f7f\u7528Outlet\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6e32\u67d3\u5b50\u8def\u7531\u3002<\/p>\n
import { Outlet } from 'react-router-dom'\nfunction Bar() {\n return (\n <div>\n <div>Bar<\/div>\n {\/* \u6709\u5d4c\u5957\u8def\u7531\u7684\u573a\u666f\u9700\u8981\u4f7f\u7528 *\/}\n <Outlet \/>\n <\/div>\n )\n}\nexport default Bar<\/code><\/pre>\n\u5d4c\u5957\u8def\u7531\u53ef\u914d\u7f6e\u5316<\/h3>\n
\u5728V6\u7248\u672c\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528useRoutes\u4ee3\u66ffreact-router-config\u914d\u7f6e\u3002\u5982\u679c\u9700\u8981\u7528\u5230\u5d4c\u5957\u8def\u7531\uff0c\u90a3\u4e48Outlet\u7ec4\u4ef6\u4e5f\u662f\u5fc5\u8981\u7684\u3002<\/p>\n
import { useRoutes } from 'react-router-dom'\nimport Home from '@\/pages\/demo\/Home'\nimport Foo from '@\/pages\/demo\/Foo'\nimport Bar from '@\/pages\/demo\/Bar'\nimport BarDetail from '@\/pages\/demo\/BarDetail'\nimport '@\/assets\/style\/App.css'\nfunction App() {\n let element = useRoutes([\n {\n path: '\/',\n element: <Home \/>\n },\n {\n path: 'foo',\n element: <Foo \/>\n },\n {\n path: 'bar',\n element: <Bar \/>,\n children: [\n {\n path: ':id',\n element: <BarDetail \/>\n }\n ]\n }\n ])\n return element\n}\nexport default App<\/code><\/pre>\n\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5982\u679c\u662f\u4f7f\u7528\u6b64\u65b9\u5f0f\u6ce8\u518c\u8def\u7531\u914d\u7f6e\uff0c\u9700\u8981\u5728\u5165\u53e3\u6587\u4ef6\u6dfb\u52a0Router\u5305\u88f9App\u7ec4\u4ef6\uff0c\u5426\u5219\u4f1a\u62a5\u9519\u3002<\/p>\n
import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { HashRouter as Router } from 'react-router-dom'\nimport App from '@\/App'\nimport '@\/assets\/style\/index.css'\nReactDOM.render(\n <React.StrictMode>\n <Router>\n <App \/>\n <\/Router>\n <\/React.StrictMode>,\n document.getElementById('root')\n)<\/code><\/pre>\nuseNavigate\u4ee3\u66ffuseHistory<\/h3>\n\/* v5 *\/\nconst history = useHistory()\nhistory.push('\/home')\nhistory.replace('\/home')\nhistory.goBack()\nhistory.goForward()\nhistory.go(2)\n\/* V6 *\/\nconst navigate = useNavigate()\nnavigate('\/home')\nnavigate('\/home', {replace: true})\nnavigate(-1)\nnavigate(1)\nnavigate(2)<\/code><\/pre>\n\u53c2\u8003\u8bf4\u660e\uff1ahttps:\/\/reactrouterdotcom.fly.dev\/<\/a><\/p>\n