react-router-dom当用户访问的路由不存在 404页面配置
在React Router DOM中,如果想要配置一个当用户访问的路由不存在时显示的404页面,你可以使用<Route>
组件来定义一个专门的404页面路由,并将它置于路由配置的最后。
以下是一个简单的示例代码:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// 你的页面组件
import Home from './Home';
import About from './About';
import NotFound from './NotFound'; // 404页面组件
function AppRouter() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
{/* 当前面的路由都不匹配时,会显示404页面 */}
<Route component={NotFound} />
</Switch>
</Router>
);
}
export default AppRouter;
在这个示例中,<NotFound>
组件是一个专门用来显示404错误的页面。<Switch>
组件确保了只会渲染第一个匹配的<Route>
,如果没有任何<Route>
匹配,则会渲染404页面。
评论已关闭