如何使用reach-router定义带有可选参数的路由

Question

我需要定义一个接受可选参数"format“的路由。最初我只定义了路由：<FleetView path='/fleet/:format' />，但每当我转到一个没有格式的网址时，例如。localhost:3000/fleet或localhost:3000/fleet/，它会给出一个错误。我通过添加不带格式参数：<FleetView path='/fleet/' />的额外冗余路由修复了它。可以工作的代码如下所示：

const NotFound = (props) => {
    return <Redirect to='/fleet' />;
}
...
<Router >
  <Redirect noThrow from="/" to="/fleet" />
  <FleetView path="/fleet/" />
  <FleetView path="/fleet/:format" />
  <NotFound default />
</Router>;

我的问题是，是否有一种方法可以在没有冗余路由的情况下做到这一点，即使:format参数成为可选的？

Answer 1

您可以使用useRouteMatch钩子以与Route相同的方式匹配当前URL，例如

<Switch>
  <Redirect from="/" to="/fleet" />
  <Route path="/fleet">
    <Fleet />
  </Route>
  <Route>
    <div>Not found</div>  
  </Route>
</Switch>

...

function Fleet() {
  const match = useRouteMatch("/fleet/:format");
  if (!match) return <div>No format</div>;
  return <div>format = {match.params.format}</div>;
}

因此，Switch只有一个路由，它为/fleet路径呈现Fleet组件，但是Fleet组件与/fleet/:format路径进行匹配，以获得format参数(可能不匹配)