I'm using React Router to manage the URLs of my webapp. This is what I have so far in Routes.js:

const Routes = () => {
  return (
    <React.Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/inicio" ponent={Home} />
        <Route path="/productos" ponent={Products} />
        <Route path="/la-empresa" ponent={LaEmpresa} />
        <Route path="/contacto" ponent={Contact} />
        <Route path="/servicios" ponent={Servicios} />
        <Route path="/prensa" ponent={Prensa} />
      </Switch>
      <WhatsappBtn />
      <Footer />
    </React.Fragment>
  );
};

As you can see, I'm rendering the navbar, footer and a whatsapp floating button in every page, and inside those goes the content. I thought that this was awesome, since I'm not loading those three every time the user goes to a different page, but I'm ing across this issue: When I visit a URL that does not correspond to any of the paths, I get those ponents anyways (which makes sense). I would like to display a 404 page instead.

How is this possible whithout sacrificing the performance?

I'm using React Router to manage the URLs of my webapp. This is what I have so far in Routes.js:

const Routes = () => {
  return (
    <React.Fragment>
      <Navbar />
      <Switch>
        <Route exact path="/inicio" ponent={Home} />
        <Route path="/productos" ponent={Products} />
        <Route path="/la-empresa" ponent={LaEmpresa} />
        <Route path="/contacto" ponent={Contact} />
        <Route path="/servicios" ponent={Servicios} />
        <Route path="/prensa" ponent={Prensa} />
      </Switch>
      <WhatsappBtn />
      <Footer />
    </React.Fragment>
  );
};

As you can see, I'm rendering the navbar, footer and a whatsapp floating button in every page, and inside those goes the content. I thought that this was awesome, since I'm not loading those three every time the user goes to a different page, but I'm ing across this issue: When I visit a URL that does not correspond to any of the paths, I get those ponents anyways (which makes sense). I would like to display a 404 page instead.

How is this possible whithout sacrificing the performance?

• javascript
• reactjs

Share Improve this question Follow asked Jun 5, 2020 at 13:35 martinmartin 88577 silver badges2424 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

you can simply add another <Route /> below the last route like this

<Route path='*' ponent={() => <h2>404 NOT FOUND</h2>} />

you can do this:

<Route path="*" ponent={ErrorPage} />

and then set exact on all other routes like so:

<Route exact path="/some/other/path" ponent={OtherComponent} />

You can use simple Route without the path like this:

<Route ponent={404Page} />

This will show 404Page on every path which you dont specify.

my suggestion is to add a AppContainer which would render the passed ponent together with the NavBar, WhatsappBtn and Footer. Then you can add a path="/" which would be the error page.

Performance is not an issue since your ponent will only be rendered if the path matches! And also only the first one to match will be rendered

You can add a catch-all path at the end of your routes in order to render a 404 ponent for any unknown paths:

...
<Route exact path="/prensa" ponent={Prensa} />
<Route path="*" ponent={My404Component} />

It must be last, otherwise any route defined after it won't be considered