如何使用reach路由器定义具有可选参数的路由

Question

我需要定义一个采用可选参数"格式"；。最初我只定义了路线：<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参数可选？

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参数(可能不匹配(