React路由404页面配置

path路径使用' * '号,表示匹配不到路径时使用该路径

代码示例：

        App.js

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Article from './components/Article'
import ArticleOne from './components/ArticleOne'
import ArticleTwo from './components/ArticleTwo'
import NotFound from './components/NotFound'

function App () {

  return (
    <BrowserRouter>
      <Link to='/'>文章</Link>

      <Routes>
        {/* 二级嵌套路由 */}
        <Route path='/' element={<Article />}>
          {/* 二级嵌套路由-默认路由 */}
          <Route index element={<ArticleOne />}></Route>
          <Route path='/articletwo' element={<ArticleTwo />}></Route>
        </Route>
        {/* 404页面 */}
        <Route path='*' element={<NotFound />}></Route>
      </Routes>

    </BrowserRouter>
  )
}

        NotFound.js

function NotFound () {
  return (
    <div>
      <h1>404</h1>
      <p>对不起，这个页面不存在</p>
    </div>
  )
}