React项目中PageNotFound组件放在路由底部仍全页面显示问题求助

问题原因 #

React Router v5 的 <Switch> 组件仅对它的直接子级 <Route> 或 <Redirect> 组件执行路径匹配逻辑。你的代码中把 <Container> 作为 <Switch> 的唯一直接子元素，<Switch> 无法识别 <Container> 内部嵌套的路由规则，访问任意路径都会直接渲染整个 <Container> 内容，因此所有页面都会显示最底部的 PageNotFound 组件。

同时你代码中管理员路由外层包裹的空标签 <></>（Fragment）也会干扰匹配逻辑，<Switch> 不会识别 Fragment 内部嵌套的路由。

修复方案 #

将 <Container> 移到 <Switch> 外层，同时调整管理员路由的包装方式，让所有 <Route>、<PrivateRoute> 成为 <Switch> 的直接子级即可：

<>
  <BrowserRouter>
    <>
      <div className="content-wrap">
        <div className="main-content">
          <Menu />
          <main className="main-pages">
            {/* Container 移到 Switch 外层 */}
            <Container>
              <Switch>
                {/* admin 路由调整为数组形式，避免Fragment干扰匹配，每个路由加唯一key */}
                {userInfo && userInfo.isAdmin && [
                  <PrivateRoute
                    key="admin-userlist"
                    path="/admin/userlist"
                    component={UserList}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-userlist-page"
                    path="/admin/userlist/:pageNumber"
                    component={UserList}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-user-edit"
                    path="/admin/user/:id/edit"
                    component={UserEdit}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-user-create"
                    path="/admin/createuser"
                    component={UserCreate}
                  />,
                  <PrivateRoute
                    key="admin-user-contact"
                    path="/admin/user/:id/contact"
                    component={UserContact}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-productlist"
                    path="/admin/productlist"
                    component={ProductList}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-productlist-page"
                    path="/admin/productlist/:pageNumber"
                    component={ProductList}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-product-edit"
                    path="/admin/product/:id/edit"
                    component={ProductEdit}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-orderlist"
                    path="/admin/orderlist"
                    component={OrderList}
                    exact
                  />,
                  <PrivateRoute
                    key="admin-orderlist-page"
                    path="/admin/orderlist/:pageNumber"
                    component={OrderList}
                    exact
                  />
                ]}

                {/* private */}
                <PrivateRoute path="/profile" component={Profile} />
                <PrivateRoute path="/shipping" component={Shipping} />
                <PrivateRoute path="/payment" component={Payment} />
                <PrivateRoute path="/placeorder" component={PlaceOrder} />
                <PrivateRoute path="/order/:id" component={Order} />

                {/* public */}
                <Route path="/products/:id" component={ProductDetail} />
                <Route path="/about" component={About} />
                <Route path="/cart/:id?" component={Cart} />
                <Route path="/login" component={Login} />
                <Route path="/register" component={Register} />
                <Route exact path="/search/:word" component={Home} />
                <Route
                  exact
                  path="/search/:word/page/:pageNumber"
                  component={Home}
                />
                <Route exact path="/page/:pageNumber" component={Home}/>
                <Route exact path="/" component={Home} />
                <Route component={PageNotFound}/> 
              </Switch>
            </Container>
          </main>
        </div>
        <Footer />
      </div>
    </>
  </BrowserRouter>

修改后<Switch>会按从上到下的顺序匹配路由，匹配到第一个符合规则的路由就会停止渲染，只有所有路由都不匹配时才会显示PageNotFound组件。

内容的提问来源于stack exchange，提问作者benz-source