Question

//Route.js

<NestedRoutes base="/logs">
      <Route>
        <LogsMainPage updateQuery={setQuery} />
      </Route>
      <Route
        path="/logs/detail"
        component={props => {
          return React.createElement(LogDetailsPage, {
            currentMainPageQuery: query,
            ...props,
          });
        }}
      />
      <Route
          path={'/:rest*'}
          component={params => <h1>Not Found {params.rest}</h1>}
        />
    </NestedRoutes>

// NestedRoutes.js
const NestedRoutes = props => {
  const router = useRouter();
  const [parentLocation] = useLocation();

  const nestedBase = `${router.base}${props.base}`;

  // don't render anything outside of the scope
  if (!parentLocation.startsWith(nestedBase)) return null;

  // we need key to make sure the router will remount when base changed
  return (
    <Router base={nestedBase} key={nestedBase}>
      {props.children}
    </Router>
  );
};

问题是每次页面呈现时，它总是显示 Not Found（呈现主要内容，即：LogsMainPage），即使 url 是正确的。尝试挖掘但找不到如何修复这个“未找到”的网址。是否有任何指南可以正确设置？

我已经在“帮助中心路线”上编辑了文档中的示例，我使用了相同的代码来显示未找到

https://codesandbox.io/s/wouter-demo-nested-routes-forked-qmg6q

Answer 1

按照以下步骤解决您的问题。

使用 /help 组件包装您的 Route 索引页内容。
然后使用 /help 组件包装所有 Switch 路由。它将确保一次只渲染一个路由，就像在 React Router 中一样。（资源 - https://github.com/molefrog/wouter/blob/master/README.md#switch-）

<Scope base="/help">
  <Switch>
    <Route path="/topics">
      <h1>Topics</h1>
      <p> To be announced...</p>
    </Route>
    <Route path="/how-to">
      <article>
        <h1>How it all started?</h1>
        <p></p>
        <p></p>
      </article>
    </Route>
    <Route path="/">
      <div>
        These are nested routes. Relative location: <CurrentLoc />
        <ul>
          <li>
            <Link href="/topics">Topics</Link>
          </li>
          <li>
            <Link href="/how-to">How to use?</Link>
          </li>
        </ul>
      </div>
    </Route> {/* Wrap the index page content */}
    <Route path="/:rest*" component={() => <h1>Not Found</h1>} />
  </Switch> {/* Wrap all the help routes */}
</Scope>

https://codesandbox.io/s/wouter-demo-nested-routes-4q9iv?file=/src/index.js

如果您需要进一步的支持，请告诉我。

Wouter 阻止 Not Found 页面显示

1 个答案: