React-Router-Dom 配置404页面

在React项目中，使用react-router-dom可以很容易地配置一个404页面。你可以使用<Route>组件来匹配一个特定的路径（比如*），然后显示一个自定义的404组件。

以下是一个简单的例子：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
// 自定义的404组件
const NotFoundPage = () => (
  <div>
    <h1>404 - 页面未找到</h1>
    <p>抱歉，你访问的页面不存在。</p>
  </div>
);
 
const App = () => (
  <BrowserRouter>
    <Switch>
      {/* 其他路由规则 */}
      <Route component={NotFoundPage} />
    </Switch>
  </BrowserRouter>
);
 
export default App;

在这个例子中，<Route component={NotFoundPage} />将匹配任何未被其他<Route>组件捕获的路径，并显示NotFoundPage组件。确保将此App组件作为你的根组件在index.js文件中渲染。

请注意，将404页面配置为路由表中的最后一项，这样其他所有的路由规则都匹配失败时，才会显示404页面。