React router always display at the bottom the Error page

Question

I'm having a problem regarding using of error page in my react app. The 404 page always shows at the bottom of every page that I render. I'm new to react. I hope someone can help me.

This is my 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;

I searched about handling error page in react and I see that the order of routes is important but I don't get why I'm still getting the error page even it's in the bottom. Thank you guys.

Melchia · Accepted Answer · 2021-08-14T17:10:22.527

That's because the switch component returns the first child at the root that meets the path condition. If the path condition doesn't exist it's evaluated as true. In your case you have 3 child Login, Register and the div which will always be evaluated to true. So just move all routes to the root of your switch:

<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>

This code works for me, but I need the Navbar in every page. — Paul Andres, Aug 14 '21 at 14:03
I mean I need the navbar in all pages except the login and register page. — Paul Andres, Aug 14 '21 at 14:10
I see what you want to achieve. then you just need to add another switch @PaulAndres check my edit — Melchia, Aug 14 '21 at 17:08
This works fine for me! Thank you so much! I'll also need to identify on how to remove the navbar and footer when I'm in the 404 page. Thanks btw! :) — Paul Andres, Aug 17 '21 at 02:54

React router always display at the bottom the Error page

1 Answers1