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

Question

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

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

反正有没有把它结合起来，就像：

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

Answer 1

对于 Reach 路由器：( 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 下面的其他路径，路由器将允许它们进行处理。

查看我写的使用通配符并到达codesandbox上的路由器的示例！

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

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

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

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

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