Javascript 在不牺牲性能的情况下使用react路由器

我正在使用React路由器管理我的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>
  );
};

const Routes=（）=>{
返回(
);
};

如您所见，我在每个页面中呈现导航栏、页脚和whatsapp浮动按钮，其中包含内容。我认为这非常棒，因为我并不是每次用户转到不同的页面时都加载这三个组件，但我遇到了这个问题：当我访问一个与任何路径都不对应的URL时，我无论如何都会得到这些组件（这是有意义的）。我想显示一个404页面

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

您可以这样做：

然后在所有其他路线上设置

exact

，如下所示：

---

您只需在最后一条路线下方添加另一条

，如下所示

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

404未找到}/>

您可以在路由的末尾添加一个“全包”路径，以便为任何未知路径呈现404组件：

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

。。。

---

它必须是最后一个，否则在它之后定义的任何路由都不会被考虑

我的建议是添加一个

AppContainer

，它将呈现传递的组件以及导航栏、WhatsappBtn和页脚。 然后您可以添加一个

path=“/”

，这将是错误页面

---

性能不是问题，因为只有路径匹配时才会呈现组件！而且只会渲染第一个匹配的路径

您可以使用简单路由，而不使用以下路径：

<Route component={404Page} />

---

这将在您未指定的每个路径上显示404页。

您应该从

path=“*”