React Router 中同一組件的多個路徑名

Question

我為三個不同的路線使用相同的組件：

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

無論如何要結合它，就像：

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

Answer 1

從 react-router v4.4.0-beta.4和v5.0.0正式開始，您現在可以指定解析為組件的路徑數組，例如

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

數組中的每個路徑都是一個正則表達式字符串。

可以在此處找到此方法的文檔。

Answer 2

至少對於 react-router v4， path可以是正則表達式字符串，因此您可以執行以下操作：

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

如您所見，它有點冗長，因此如果您的component / route像這樣簡單，則可能不值得。

當然，如果這真的經常出現，你總是可以創建一個包裝組件，它接受一個數組paths參數，它可以重復使用正則表達式或.map邏輯。

Answer 3

我不認為如果您使用低於 v4 的 React Router 版本。

您可以像使用任何其他 JSX 組件一樣使用map ：

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

編輯

只要path-to-regexp支持，您也可以在 react-router v4 中為路徑使用正則表達式。 有關更多信息，請參閱@Cameron 的回答。

Answer 4

從 react-route-dom v5.1.2 開始，您可以傳遞多個路徑，如下所示

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

顯然，您需要在頂部導入 Home jsx 文件。

Answer 5

其他選項：使用路由前綴。 /pages例如。 你會得到

• /pages/home
• /pages/users
• /pages/widgets

然后在Home組件內部詳細解析。

<Router>
  <Route path="/pages/" component={Home} />
</Router>

Answer 6

根據 React Router 文檔，proptype 'path' 的類型是 string 。因此，您無法將數組作為 props 傳遞給 Route 組件。

如果您只想更改路線，您可以將相同的組件用於不同的路線，沒有問題

Answer 7

從 react router v6 開始，他們刪除了正則表達式的選項，根據類型定義，它又是path: string 。 目前，您必須再次拼出每條路徑或使用地圖以方便：

<Routes>
    {('home', 'users', 'widgets').map(path => <Route path={path} component={Home} />)}
</Routes>

另見https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns

Answer 8

使用 react-router v6，你可以這樣做：

<Routes>
  {['path1', 'path2'].map((path) => (
            <Route path={path} element={<SomeComponent />} />
  ))}
</Routes>

Answer 9

這是一個小 function 將您的自定義路線轉換為帶有paths道具的react-router v6 支持的多個標准路線，帶有path道具：

const normalizeRoutes = (routes) =>
  routes.reduce((acc, curr) => {
    const newRoute = curr.children
      ? { ...curr, children: normalizeRoutes(curr.children) }
      : curr;
    if (newRoute.paths) {
      return [
        ...acc,
        ...newRoute.paths.map((path) => {
          const { paths, ...rest } = newRoute;
          return { ...rest, path };
        })
      ];
    }
    return [...acc, newRoute];
  }, []);

Answer 10

如果需要從路徑添加幾條路線

在APP中添加基本路線，如

<Routes>
  <Route path='/dashboard' element={<Dashboard/>} />
  <Route path='*' element={<NotFound/>} />
</Routes>

這里路由 /dashboard 路徑並調用 Dashboard 組件

然后，在 Dashboard 組件中添加一些確切的路線，例如

return (
  <Routes>
    <Route exact path='/' element={<Client/>} />
    <Route exact path='/user' element={<One/>} />
    <Route exact path='/role' element={<Two/>} />
    <Route path='*' element={<NotFound/>} />
  </Routes>
)

這里路由的確切路徑，“/”意思是“/dashboard”

/儀表盤

/儀表板/用戶

/儀表板/角色

Answer 11

react-router-dom不再支持路徑中的正則表達式，另一種方法是將組件保存在變量中並將其用作許多路由的組件。

let home= <Home />

<Route path={"/home" | "/users" | "/widgets"} component={Home} />

return <Routes>
        <Route path="/home" element={home} />
        <Route path="/users" element={home} />
        <Route path="/widgets" element={home} />
    </Routes>

Answer 12

從react-router v4.4開始，您可以在下面執行以下操作。

將路徑存儲在變量中，然后向下傳遞並使用“ |” 操作員。

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} /> 

因此，對於所有匹配的路徑，它將呈現component={Home} ，這是您需要的..