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

【问题标题】：How to define a route with optional parameter using reach-router如何使用reach-router定义带有可选参数的路由
【发布时间】：2021-09-12 03:16:38
【问题描述】：

我需要定义一个采用可选参数“格式”的路由。最初我只定义了路线： <FleetView path='/fleet/:format' /> 但每当我访问没有格式的 URL 时，例如。 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 参数可选？

【问题讨论】：

标签： react-router reach-router

【解决方案1】：

您可以使用 useRouteMatch 挂钩来匹配当前 URL，就像 Route 一样，例如

<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 参数（可能不会匹配）

【讨论】：