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

Question

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

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

有没有办法把它结合起来，就像:

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

Answer 1

对于到达路由器:( 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[*] 我相信你可以重定向或东西。

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