react-router-dom当用户访问的路由不存在 404页面配置

import './App.css';
import React from "react";
import Index from "./components/index";
import Alinput from "./components/alinput";
import Cantfindmin from "./components/cantfindmin";
import { HashRouter as Router,Routes,Route, Link  } from "react-router-dom";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
 
  render(){
    const IndexRmin = ()=><div><Index/></div>
    const AlinputRmin = ()=><div><Alinput/></div>
    const Notfoundmet = ()=><div><Cantfindmin/></div>
    return (
      <div className="App">
        <Router>
            <ul>
              <li>
                  <Link to="/">首页</Link>
              </li>
              <li>
                  <Link to="/alinput">详情</Link>
              </li>
            </ul>
            <Routes>
              <Route path='/' element = { IndexRmin() }></Route>
              <Route path='/alinput' element = { AlinputRmin() }></Route>
              <Route path='*' element = { Notfoundmet() }></Route>
            </Routes>
        </Router>
      </div>
    )
  }
}

export default App;

不需要知道这三个组件的内容 只需要知道 当用户访问的路由不存在时 就会自动进入path='*'指向的路由中

运行代码 我们点击首页 则进入首页

点击详情 则进入详情

当我们输入一堆乱七八糟不存在的东西时 就会自动进入 这个404界面 也就是 path='*'对应的组件了