React 路由器总是显示在错误页面的底部

Question

我在我的 react 应用程序中使用错误页面时遇到问题。 404 页面始终显示在我呈现的每个页面的底部。我是新来的反应。我希望有人可以帮助我。

这是我的 App.js

import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';

import Login from './components/auth/Login';
import Register from './components/auth/Register';
import ErrorPage from './components/ErrorPage';
import Order from './components/Order';
import Navbar from './components/partials/Navbar';
import Footer from './components/partials/Footer';
import Shop from './components/Shop';
import ItemDetails from './components/ItemDetails';
import Cart from './components/Cart';
import Customize from './components/Customize';


const App = () => {

  return (
    <>
     <Router>
       <Switch>
        
         <Route exact path='/login'>
           <Login />
         </Route>
         
         <Route exact path='/register'>
           <Register />
         </Route>

         <div>
            <Navbar />

              <Route exact path='/'>
                <Shop />
              </Route>

              <Route exact path='/order'>
                <Order />
              </Route>

              <Route exact path='/item/details'>
                <ItemDetails />
              </Route>

              <Route exact path='/cart'> 
                <Cart />
              </Route>

              <Route exact path='/customize'>
                <Customize />
              </Route>

              <Route component={ErrorPage} />
          </div>   
          
       </Switch>
     </Router> 
     <Footer />
    </>
  );
}

export default App;

我在 react 中搜索了有关处理错误页面的信息，我发现路由的顺序很重要，但我不明白为什么即使它在底部，我仍然会收到错误页面。谢谢各位。

Answer 1

那是因为 switch 组件返回了根处第一个满足路径条件的子元素。如果路径条件不存在，则将其评估为真。在您的情况下，您有 3 个子登录、注册和将始终被评估为 true 的 div。因此，只需将所有路由移至交换机的根目录：

<Router>
    <Switch>

        <Route exact path='/login'>
            <Login />
        </Route>
        
        <Route exact path='/register'>
            <Register />
        </Route>

        <div>
            <Navbar />
            <Switch>
                <Route exact path='/'>
                    <Shop />
                </Route>

                <Route exact path='/order'>
                    <Order />
                </Route>

                <Route exact path='/item/details'>
                    <ItemDetails />
                </Route>

                <Route exact path='/cart'> 
                    <Cart />
                </Route>

                <Route exact path='/customize'>
                    <Customize />
                </Route>

                <Route component={ErrorPage} />
            </Switch>
        </div>   
        
    </Switch>
</Router>