React Router如何配置使/admin路径不触发Switch内的404错误

问题根因 #

当前/admin路由未放在<Switch>组件内，只要路径匹配就会渲染；而内部<Switch>匹配/admin路径时，不符合其他明确路由规则，就会命中通配符404路由，导致两个组件同时渲染。

方案1：修改404路由匹配规则（改动最小） #

React Router v5的Route组件支持传入正则路径，你可以将404路由的path修改为排除/admin开头的正则匹配，代码如下：

<Route path={/^(?!\/admin).*$/}>
  <Error404 />
</Route>

该正则会匹配所有不是以/admin开头的路径，访问/admin时不会命中404路由，无需调整现有路由结构。

方案2：重构路由分层结构（更规范，推荐） #

在外层新增一层<Switch>，将/admin路由和其他带Container的业务路由拆分为两个独立分支，修改后的完整代码如下：

function App() {
    return (
        <Router>
            <Header />
            <main className="py-1">
                <Switch>
                    {/* Admin路由分支，不受Container布局影响 */}
                    <Route path="/admin" component={Admin} />
                    {/* 其他普通页面分支，复用原有Container布局 */}
                    <Route path="/">
                        <Container>
                            <Switch>
                                <Route path="/" component={HomeScreen} exact />
                                <Route path="/login" component={LoginScreen} exact />
                                <Route path="/sitemap" component={SiteMap} exact />
                                {/* 其余类似路由配置 */}
                                <Route path="*">
                                    <Error404 />
                                </Route>
                            </Switch>
                        </Container>
                    </Route>
                </Switch>
            </main>
            <Footer />
        </Router>
    );
}

export default App;

外层<Switch>只会命中两个分支中的一个：访问/admin路径时仅渲染Admin组件，不会进入带Container的分支，自然不会触发404；其他路径完全复用原有逻辑，无需修改Container现有适配代码，后续新增其他不需要Container布局的路由也可以直接在外层Switch中添加，可扩展性更好。

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