React二级路由-默认路由

App.js配置

在Route下面包含二级路由

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

import Article from './components/Article'
import ArticleOne from './components/ArticleOne'
import ArticleTwo from './components/ArticleTwo'

function App () {

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

      <Routes>
        {/* 二级嵌套路由 */}
        <Route path='/' element={<Article />}>
          {/* 二级嵌套路由-默认路由  index属性默认显示ArticleOne*/}
          <Route index element={<ArticleOne />}></Route>
          <Route path='/articletwo' element={<ArticleTwo />}></Route>
        </Route>
      </Routes>

    </BrowserRouter>
  )
}

export default App

Article.js配置

引入Outlet

import { Outlet, Link } from 'react-router-dom'

function Article () {
  return (
    <div>
      文章选项
      <Link to='/articletwo'>文章2</Link>
        {/* 路由出口 */}
      <Outlet />
    </div>
  )
}

export default Article