我正在使用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页面。
在不牺牲性能的情况下这怎么可能?
最佳答案
您可以像这样在最后一条路线下方添加另一个<Route />
<Route path='*' component={() => <h2>404 NOT FOUND</h2>} />
关于javascript - 使用React Router而不牺牲性能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/62216600/