同一组件在Reach Router中具有多个路径名

Question

我正在为三个不同的路由使用相同的组件：

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

有没有什么办法可以将它们合并成这样：

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

- Ali Seyfollahi

---

React Router中同一组件的多个路径名称的副本：https://dev59.com/OlkR5IYBdhLWcg3w_B_- - Vincent

这是针对React Router的，这是针对Reach Router的。@Vincent - Ali Seyfollahi

你是对的。抱歉，是我的错。 - Vincent

Answer 1

我对文档和@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

- roNn23

Answer 2

对于 Reach Router：(https://reach.tech/router/example/)

根据确切的示例，我唯一能想到如何在单行中完成这个操作是使用通配符。

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

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

...

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

您可以在主页下方继续其他路径，路由器将允许它们进行处理。

请查看我在CodeSandbox上使用通配符和Reach Router编写的示例链接。

注意：这是一个万能匹配，但如果不解析参数，则是我看到的唯一的单行解决方案。

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

//这可以通过在您的呈现中使用if语句来解决

//它也不会产生预期的URL，例如/home，我没有研究过，因为它不是问题的一部分...但如果它匹配props [*]，我相信您可以重定向或其他操作。

您可以阅读更多关于Reach Router的Route组件的信息链接。

- Cullen Bond

---

第一个链接已经失效。 - Mark Amery

Answer 3

根据你所处理的情况，<Redirect /> 也可能起到作用。

<Router>
  <Redirect from="/" path="/home" noThrow />
  <Home path="/home" />
</Router>

- pianoman

Answer 4

您可以使用路由数组，为不同的路径使用单个组件。

示例代码:

import sampleComponent from './sampleComponent'; // 单个组件用于多个路由

 <Router>
  <Switch>
   {["/pathname_1", "/pathname_2", "/pathname_3", "/pathname_4", "/pathname_5", "/pathname_6"].map(pathname =>  (<Route exact path={pathname} component={sampleComponent} />) )}
   <Switch>
<Router>

- Hemant

---

那是针对React Router的，我正在寻找在Reach Router中的解决方案。 - Ali Seyfollahi