如何使用React router dom 6为主页添加多个路径？

Question

我正在使用React Router dom 6

我想加载3个路径的登录组件：

/ & /login & /home

我尝试过这条路：

<Route path='/(home|login)/' element={<Login />} />

但是不起作用...

Answer 1

最简单的方法：

<Route path='/' element={<Login />} />
<Route path='/login' element={<Login />} />
<Route path='/home' element={<Login />} />

Answer 2

在

react-router-dom

v6 中，

Route

组件的

path

属性仅采用单个字符串路径值，而不是像以前版本那样采用数组。

路线

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string; // <-- string type only
}

您需要为每条路径渲染单独的路线。

<Route path='/' element={<Login />} />
<Route path='/home' element={<Login />} />
<Route path='/login' element={<Login />} />

或者将此实用程序抽象为函数（不是组件！）。它需要是一个函数调用，因为只有

Route

或

React.Fragment

组件是

Routes

组件的有效子组件。

const renderPaths = (paths, Element) =>
  paths.map((path) => <Route key={path} path={path} element={Element} />);

...

<Routes>
  {renderPaths(["/", "/home", "/login"], <Login />)}
</Routes>

Answer 3

你可以试试这个

<Route path={['/', '/login', '/home']} element={<Login />} />

Answer 4

React Router 的最新版本接受字符串数组作为

<Route/>

的路径。

你可以使用

<Route path={['/', '/login', '/home']}  element={<Login />} />

参考：https://v5.reactrouter.com/core/api/Route/path-string-string

Answer 5

不是react专业人士，但我相信可以通过组件来实现。

1. 创建一个主页组件/页面。
2. 在您的路线“/”、“登录”或“主页”中调用该页面/组件。

<Route path="/" element={<YourComponent />} />

<Route path="/login" element={<YourComponent />} />

<Route path="/home" element={<YourComponent />} />

Answer 6

我建议如下：

<Route path='/' element={<Login />} />
<Route path='/home' element={<Navigate to='/' />} />
<Route path='/login' element={<Navigate to='/' />} />