Question

我将相同的组件用于三种不同的路线：

<Router>
    <Home path="/" />
    <Home path="/home" />
</Router>

反正有结合起来的样子，就像：

<Router>
    <Home path=["/home", "/"] />
</Router>

Answer 1

这应该对您有用。

<Router>
    <Home path={["/home", "/"]} />
</Router>

https://reacttraining.com/react-router/web/api/Route/path-string-string

Answer 2

我认为您可以按照自己的意愿去做。看一下这个：https://reacttraining.com/react-router/core/api/Route/path-string-string

Answer 3

同一组件的多个路径名的代码示例：

  {["/affiliate/demo", "/affiliate/listcampaign", "/affiliate/createcampaign", "/affiliate/createcampaignshare/:id", "/affiliate/manageoffers", "/affiliate/accountsetting", "/affiliate/subaffiliates", "/affiliate/createsubaffiliate", "/affiliate/viewsubaffiliate"].map((path, index) => {
          return (<Route exact key={index} path={path} component={Affilaiteslistcampaign} />)
        })}

Answer 4

对于到达路由器：（https://reach.tech/router/example/）

显示了确切的示例后，我能看到（单行）执行此操作的唯一方法是使用通配符。

要找到一种无副作用的复制方法，我们需要查看整个导航菜单。

  <Router>
    <Home path="/*" />
    <Chicken path="chicken">
  </Router>

...

const Home = props => {
  let urlPath = props["*"]
  // URL: "/home"
  // urlPath === "home"
  // URL/: "/"
  // urlPath ===""
}

您可以继续使用Home下面的其他路径，路由器将允许它们处理。

签出the example using a wildcard and reach router on codesandbox, I wrote!

注意：这是一个包罗万象的东西，但是我没有看到唯一的单行解决方案。

某些缺点包括Home渲染，而不是'404'等。

//这可以通过渲染中的if语句解决

//它不会为/ home生成预期的URL，并且由于它不是问题的一部分，因此我也没有对此进行调查。.但是，如果它与props [*]相匹配，我相信您可以重定向或东西。

您可以阅读有关到达路由器的路由组件的更多信息。 https://reach.tech/router/api/RouteComponent

Answer 5

我对文档和@ cullen-bond中的通配符解决方案不满意，因为我不得不映射许多其他路径并提出了该解决方案：

<Router>
  {["/home", "/", "/other", "/a-lot-more"].map(page => <Home path={page} />)}
</Router>

示例：https://codesandbox.io/s/reach-router-starter-v1-forked-6f44c?file=/src/index.js

到达路由器中同一组件的多个路径名

5 个答案: