我正在为三个不同的路由使用相同的组件：
<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>
从react-router v4.4.0-beta.4开始，在v5.0.0中正式支持，您现在可以指定一组解析为组件的路径，例如：
<Router>
<Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>
数组中的每个路径都是一个正则表达式字符串。
有关此方法的文档可以在此处找到。
React Router v6 的更新
React Router v6不再允许将路径数组作为路由属性传递。 相反，您可以使用useRoutes（请参见此处的文档）React hook 来实现相同的行为：
import React from "react";
import {
BrowserRouter as Router,
useRoutes,
} from "react-router-dom";
const element = <Home />;
const App = () =>
useRoutes(['/home', '/users', '/widgets'].map(path => ({path, element})));
const AppWrapper = () => (
<Router>
<App />
</Router>
);
您可以在此处查看此代码的扩展示例。
本答案的关键是：
使用 useRoutes 钩子功能上等同于
<Routes>，但它使用 JavaScript 对象而不是<Route>元素来定义路由。
exact 属性？ - JulianSoto至少在 react-router v4 中，path 可以是一个正则表达式字符串，因此你可以像这样做：
至少在 react-router v4 中，path 可以是一个正则表达式字符串，因此你可以像这样做：
<Router>
<Route path="/(home|users|widgets)/" component={Home} />
</Router>
如您所见，这有点啰嗦，如果您的component/route像这样简单，那么可能不值得这样做。
当然，如果这种情况经常出现，您可以创建一个包装组件，该组件接受一个数组paths参数，可重复使用正则表达式或.map逻辑。
/^\/(home|users|widgets)/ 现在， /widgets 会匹配成功，但是 /dashboard/widgets 将不匹配。 - TowlerWarning: Failed prop type: Invalid prop 'path' of type 'regexp' supplied to 'Route', expected 'string'。 - Fábio Paiva<Route path="/(new|edit)/user/:id?" ... /> - medvpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}。 - Murtaza Hussain如果你使用的是低于v4版本的React Router，我认为这不是一个问题。
然而，你可以像对待其他JSX组件一样使用map：
<Router>
{["/home", "/users", "/widgets"].map((path, index) =>
<Route path={path} component={Home} key={index} />
)}
</Router>
编辑
只要它被react-router v4支持的path-to-regexp，您还可以使用正则表达式来匹配路径。有关更多信息，请参见@Cameron的答案。
key 属性。 - Neurotransmitterexact（如果已添加）。 - Kumar从React Router v6开始，他们删除了正则表达式选项，并且根据类型定义，它再次变成了path: string。目前，您需要再次拼写每个路径，或者使用地图方便起见：
<Routes>
{['home', 'users', 'widgets'].map(path => <Route path={path} element={<Home />} />)}
</Routes>
另请参见 https://reactrouter.com/docs/en/v6/upgrading/v5＃note-on-route-path-patterns
/card/new和/card/:cardId，它将自动选择最合适的选项。如果涉及正则表达式，则这当然会更加困难（如果不是不可能）。 - bas{['home', 'users', 'widgets'].map ... - ElwoodP从react-route-dom v5.1.2版本开始，您可以按如下方式传递多个路径
<Route path={"/home" | "/users" | "/widgets"} component={Home} />
显然，你需要在顶部导入Home jsx文件。
path supplied to Route. - AzizStark<Route path={["/home", "/users", "/widgets"]} component={Home} />。 - MJBZA|字符应该在字符串内部，而不是在字符串之间作为运算符（并且请参见有关版本6中不再支持正则表达式的其他答案）。 - Beni Cherniavsky-Paskin<Routes>
{['path1', 'path2'].map((path) => (
<Route path={path} element={<SomeComponent />} />
))}
</Routes>
<Route path>仅支持两种占位符：动态的:id风格参数和*通配符。其他选项：使用路由前缀。例如/pages。
/pages/home/pages/users/pages/widgets然后在Home组件中详细解决它。
<Router>
<Route path="/pages/" component={Home} />
</Router>
Route组件的过程。这有助于保持路由易于/直观地阅读，并允许轻松混合MultiRoute和常规Route。import { BrowserRouter, Route, Routes } from 'react-router-dom';
/**
* For using the same JSX element with **multiple** paths
* @param {JSXElement} el - JSX element
* @param {...string} paths - all paths that point to given JSX element
* @returns `Route` elements
*/
function MultiRoute (el, ...paths) {
return paths.map((p) => <Route key={p} element={el} path={p} />);
};
function App() {
return (
<BrowserRouter>
<Routes>
<Route element={<LogIn />} path='/log-in' />
<Route element={<SignUp />} path='/sign-up' />
{MultiRoute(<Home />, '/home', '/users', '/widgets')}
{MultiRoute(<Contact />, '/feedback', '/contact')}
</Routes>
</BrowserRouter>
);
}
如果需要从路径中添加几个路由
在应用程序中添加基本路由，例如
<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"
/dashboard
/dashboard/user
/dashboard/role