admin管理员组

文章数量:1022496

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 asked Jun 5, 2020 at 13:35 martinmartin 8857 silver badges24 bronze badges
Add a ment  | 

5 Answers 5

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

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 asked Jun 5, 2020 at 13:35 martinmartin 8857 silver badges24 bronze badges
Add a ment  | 

5 Answers 5

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

本文标签： javascriptUsing react router without sacrificing performanceStack Overflow

版权声明：本文标题：javascript - Using react router without sacrificing performance - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745532349a2154806.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。