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

Question

我对三个不同的路线使用相同的组件：

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

有没有办法把它组合起来，就像：

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

Answer 1

我想你可以做你想做的。看看这个：https://reacttraining.com/react-router/core/api/Route/path-string-string

Answer 2

您可以使用路由数组将单个组件用于多个路径。

代码示例：

从“./sampleComponent”导入 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>

Answer 3

对于到达路由器：(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!

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

一些缺点包括主页渲染而不是“404”等

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

//它不会为 /home 产生预期的 URL，我没有研究它，因为它不是问题的一部分..但如果它匹配 props[*] 我'我确定你可以重定向或其他东西。

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

Answer 4

我对文档中的通配符解决方案和@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

Answer 5

根据您所处理的情况，<Redirect /> 也可以完成这项工作。

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

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

Multiple path names for a same component in Reach Router

javascript

reactjs

url-routing

reach-router