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中，$per = array(); $path = $this->uri->segment(1); foreach($contents as $key => $value) { $stack[$key] = $value['slug']; } $i=0; while($i <= 3) { if($path !== $stack[$i]) { array_push($per, $contents[$i]); } $i++; }可以是正则表达式字符串，所以你可以这样做：

path

正如你所看到的那样有点冗长，所以如果你的<Router> <Route path="/(home|users|widgets)/" component={Home} /> </Router> / component很简单，那么它可能就不值得了。

当然，如果这实际上经常出现，你总是可以创建一个包含数组route参数的包装组件，它可以重复使用正则表达式或paths逻辑。

Answer 2

我不认为这是不幸的。

您可以像使用任何其他JSX组件一样使用map：

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

修改

只要in react-router v4支持路径path-to-regexp，您也可以使用正则表达式。有关详细信息，请参阅@ Cameron的答案。

Answer 3

从react-router v4.4.0-beta.4开始，并正式在v5.0.0中，您现在可以指定解析为组件的路径数组，例如

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

数组中的每个路径都是一个正则表达式字符串。

此方法的文档可以在here中找到。

Answer 4

其他选项：使用路由前缀。例如/pages。你会得到

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

然后在Home组件中详细解决它。

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

Answer 5

根据React Router文档，proptype'path'的类型为string。因此，您无法将数组作为props传递给Route Component。

如果您的目的是仅改变路线，则可以将相同的组件用于不同的路线，而不会出现问题

Answer 6

从react-route-dom v5.1.2开始，您可以按如下所示传递多条路径

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

很显然，您需要在顶部导入Home jsx文件。

Answer 7

从react-router v4.4开始，您可以在下面执行以下操作。

将路径存储在变量中，然后向下传递并使用'|'运算符。

ttf

因此对于它匹配的所有路径，它将呈现mkv，这是您需要的..

React Router中同一组件的多个路径名

7 个答案: