React应用所有页面均显示NotFound 404组件问题排查

问题根因 #

• 1. Switch 组件使用不符合规范：React Router v5 的 Switch 仅会对直接子元素中的 Route/Redirect 做路由匹配，你在 App.js 中将 div 作为 Switch 的直接子元素，导致 Switch 完全失效，所有路由匹配成功的组件都会同时渲染。
• 2. 404路由位置错误：无path属性的Route会匹配所有路径，你将404路由放在了signin、signup、业务路由、权限路由之前，所以任何路径都会先匹配到404组件，和后续匹配成功的业务组件同时展示。

修复步骤 #

1. 调整App.js代码，移除无效的Switch外层包裹 #

修改后的App.js核心部分如下：

function App() {
  const { siteWidth, exSideBar } = useContext(UserContext);
  return (
    <Suspense fallback={<PageLoading />}>
      <ConfigProvider >
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <AppStyle siteWidth={siteWidth} >
              {/* 移除原来这里的Switch标签，后续将Switch放到路由列表的外层 */}
              <div className="siteContainer">
                {exSideBar ? (
                  <div className="exSideBar">
                    <ExSideBar />
                  </div>
                ) : null}
                <div className="bodyContainer">
                  <div className="mainContent">
                    <Header />
                    <div className="body">
                      <div className="mainContainer">
                        <Routes />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <footer className="footer">
                <Footer />
              </footer>
            </AppStyle>
          </BrowserRouter>
        </ThemeProvider>
      </ConfigProvider>
    </Suspense>
  );
}

2. 调整AppRoutes代码，添加Switch包裹+调整404路由位置 #

将原来的空标签<>替换为Switch，并把404路由移到所有路由的最后位置，修改后代码如下：

import { Route, Redirect, Switch } from 'react-router-dom';
// 其余import保持原有逻辑不变

const routes = [/* 原有路由配置保持不变 */]

const AppRoutes = () => {
  const token = localStorage.getItem('token')
  return (
    {/* 用Switch替换原来的空标签，包裹所有Route节点 */}
    <Switch>
      <Route
        exact
        path={"/"}
        component={asyncComponent(() => import("../pages/Home/home"))}
      />
      <Route
        exact
        path={"/signin"}
        component={asyncComponent(() => import("../pages/Signin/signin"))}
      />
      <Route
        exact
        path={"/signup"}
        component={asyncComponent(() => import("../pages/Signup/signup"))}
      />
      {routes.map((r, i) => {
        return <Route key={i} {...r} />
      })}
      {authRoutes.map((r, i) => {
        return <Route key={i} {...r} >
          {!token ? <Redirect to="/signin" /> : null}
        </Route>
      })}
      {/* 404路由放到所有路由的最后面 */}
      <Route
        component={asyncComponent(() => import("../pages/404.js"))}
      />
    </Switch>
  )
}
export default AppRoutes

修复原理 #

调整后Switch会按从上到下的顺序匹配路由，只有当前面所有路由都没有匹配成功时，才会渲染最后的404组件，不会和其他业务组件同时出现。

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