如何使用reach-router定义带可选参数的路由 无需添加冗余路由

你可以直接通过路由参数后加?后缀的方式将format标记为可选参数，无需额外新增冗余路由。

具体实现 #

1. 语法规则：在可选路由参数的名称后追加?，即把原路径/fleet/:format修改为/fleet/:format?
2. 该写法可同时匹配以下三种路径：
   • /fleet
   • /fleet/
   • /fleet/[任意format参数值]

修改后的完整代码示例 #

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

注意事项 #

• 在组件内获取format参数时，当用户未传递该参数，取值为undefined，需要做好对应的默认值兜底处理
• 该语法兼容React Router v5、v6主流版本，无需额外依赖

内容的提问来源于stack exchange，提问作者Alan