reactjs - 如果 URL 不完全匹配，如何免除某些路由不命中 404 错误？

Question

我有一个这样的应用程序布局：

function App() {
    return (
        <Router>
            <Header />
            <main className="py-1">
                <Route path="/admin" component={Admin} />
                <Container>
                    <Switch>
                        <Route path="/" component={HomeScreen} exact />
                        <Route path="/login" component={LoginScreen} exact />
                        <Route path="/sitemap" component={SiteMap} exact />
                        {/* SOME MORE ROUTES LIKE THESE .... */}
                        <Route path="*">
                            <Error404 />
                        </Route>
                    </Switch>
                </Container>
            </main>
            <Footer />
        </Router>
    );
}

export default App;

我正在设置一个管理页面，出于某种原因，我不想将它放入容器中，例如我想为管理页面设置一个侧边栏，如果我将它放入容器中，那么它会变得难看，不像侧边栏和我不想更改容器的布局，它也适用于其他组件。但是，如果我将 Admin 组件放在容器之外，则<Switch>认为它不是有效的 URL，并且 Both Admin+<Error404 />组件同时加载。

所以我想在这里提出一些逻辑，即路线：

<Route path="*"><Error404 /></Route>

应忽略以 /admin 开头且未包含在<Switch>标签中且未使用Error404

那可能吗？有没有其他方法可以做到这一点？

标签： reactjsreact-router-dom

Answer 1

但是，如果我将 Admin 组件放在容器之外，则<Switch> 认为它不是有效的 URL，并且 Both Admin+<Error404 /> 组件同时加载。

这是因为Router组件包含（即所有匹配）匹配并呈现路由，而Switch 独占（即只有一个匹配）匹配并呈现它们。由于 the"/admin" Route和Switch都由 the 渲染，因此Router它们都可能匹配。

您可以在路由器中使用多个Switch。渲染“外部”开关以匹配和渲染“/admin”路由或其他所有内容，并按原样使用“内部”开关。现在 404 路由在内部交换机中的“其他”路由上呈现。

function App() {
  return (
    <Router>
      <Header />
      <main className="py-1">
      <Switch>
        <Route path="/admin" component={Admin} />
        <Route>
          <Container>
            <Switch>
              <Route path="/" component={HomeScreen} exact />
              <Route path="/login" component={LoginScreen} exact />
              <Route path="/sitemap" component={SiteMap} exact />
              {/* SOME MORE ROUTES LIKE THESE .... */}
              <Route path="*">
                <Error404 />
              </Route>
            </Switch>
          </Container>
        </Route>
      </Switch>
      </main>
      <Footer />
    </Router>
  );
}