如何设置Route路由路径的URL参数为可选匹配

解决方案分两种情况，取决于你使用的React Router版本： #

1. React Router v5及更早版本

直接在可选参数名后加问号?即可，修改后的配置如下：

<Route path="/etc/:id?/">
  <Component />
</Route>

修改后无论是访问/etc/还是带参数的/etc/123/都可以正常匹配该路由，组件内获取id参数时，如果没有传参返回值为undefined。

2. React Router v6版本

v6同样支持用问号标记可选参数，不过路径匹配规则更严格，如果你需要同时匹配不带末尾斜杠的/etc和带参数的/etc/123，可以把路径调整为：

<Route path="/etc/:id?">
  <Component />
</Route>

如果需要保留末尾斜杠的匹配规则，直接写成/etc/:id?/即可，v6会自动处理可选参数的匹配逻辑。

小提示：组件内获取路由参数时建议增加非空判断，避免未传id时出现取值报错的问题。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture