javascript - 使用React Router而不牺牲性能

Question

我正在使用React Router来管理我的Web应用程序的URL。这是我到目前为止在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>
  );
};

如您所见，我将在每个页面中渲染导航栏，页脚和whatsapp float 按钮，并在其中显示内容。我认为这很棒，因为我不会在用户每次访问不同页面时都加载这三个文件，但是我遇到了这个问题:当我访问与任何路径都不对应的URL时，无论如何都要获取这些组件(这很有意义)。我想显示一个404页面。

在不牺牲性能的情况下这怎么可能？

Answer 1

您可以像这样在最后一条路线下方添加另一个<Route />

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