Wouter框架嵌套路由配置后URL正确仍显示NotFound页面问题如何解决

• 嵌套路由路径匹配规则错误：你自定义的NestedRoutes已经给内层Router设置了base为/logs，内层所有Route的path应该是相对于这个base的相对路径，你写/logs/detail相当于内层要匹配/logs/logs/detail才会命中，实际访问/logs/detail的时候内层只匹配到根路径的LogsMainPage，继续往下遍历就命中了通配的404路由。
• Wouter默认路由匹配是包容性的：默认情况下Wouter会渲染所有匹配成功的Route，而不是匹配到第一个就停止，所以即便前面的路由命中了，后面的通配404也会同时渲染。

仅需修改Route.js的配置即可，修改后代码如下：

//Route.js
<NestedRoutes base="/logs">
  {/* Switch组件实现排他匹配，匹配到第一个符合的路由就停止 */}
  <Switch>
    <Route path="/">
      <LogsMainPage updateQuery={setQuery} />
    </Route>
    {/* 内层路径相对于base /logs，直接写/detail即可，不需要再加/logs前缀 */}
    <Route
      path="/detail"
      component={props => {
        return React.createElement(LogDetailsPage, {
          currentMainPageQuery: query,
          ...props,
        });
      }}
    />
    <Route
        path={'/:rest*'}
        component={params => <h1>Not Found {params.rest}</h1>}
      />
  </Switch>
</NestedRoutes>

注意使用前需要先从wouter包中引入Switch组件

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