Using react router without sacrificing performance

user_11556154 0
Viewed 607

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" component={Home} />
        <Route path="/productos" component={Products} />
        <Route path="/la-empresa" component={LaEmpresa} />
        <Route path="/contacto" component={Contact} />
        <Route path="/servicios" component={Servicios} />
        <Route path="/prensa" component={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 coming across this issue: When I visit a URL that does not correspond to any of the paths, I get those components anyways (which makes sense). I would like to display a 404 page instead.

How is this possible whithout sacrificing the performance?

reactjs javascript
5 Answers

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

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

you can do this:

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

and then set exact on all other routes like so:

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

user_107953480

You can use simple Route without the path like this:

<Route component={404Page} />

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

user_123100930

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

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

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

user_24598340

my suggestion is to add a AppContainer which would render the passed component 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 component will only be rendered if the path matches! And also only the first one to match will be rendered

user_8094230
Related