在每个页面中显示 PageNotFound 组件。反应

Question

我不明白为什么我的 PageNotFound 组件会显示在我的应用程序中，即使我已将它放在我所有路线的底部？问题可能是嵌套路由，但我仍然不知道该怎么做。非常感谢您的帮助，这是我的代码：

    <>
  <BrowserRouter>
    <>
      <div className="content-wrap">
        <div className="main-content">
          <Menu />
          <main className="main-pages">
            <Switch>
              <Container>
                {/* admin */}
                {userInfo && userInfo.isAdmin && (
                  <>
                    <PrivateRoute
                      path="/admin/userlist"
                      component={UserList}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/userlist/:pageNumber"
                      component={UserList}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/user/:id/edit"
                      component={UserEdit}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/createuser"
                      component={UserCreate}
                    />
                    <PrivateRoute
                      path="/admin/user/:id/contact"
                      component={UserContact}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/productlist"
                      component={ProductList}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/productlist/:pageNumber"
                      component={ProductList}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/product/:id/edit"
                      component={ProductEdit}
                      exact
                    />
                    <PrivateRoute
                      path="/admin/orderlist"
                      component={OrderList}
                      exact
                    />
                    <PrivateRoute
                      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}/> 
              </Container>
            </Switch>
          </main>
        </div>
        <Footer />
      </div>
    </>
  </BrowserRouter>

我尝试过更改订单等等，但仍然没有用..

Answer 1

试试看： <Route path="*" component={PageNotFound}/>