一、一级路由

配置信息

具体代码配置

Public

首先需要引入bootstrap库，直接配置好css内容

index.html

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="stylesheet" href="/bootstrap.css">
     <title>React App</title>
     <style>
             .atguigu{
                 background-color: orange !important;
                 color: white !important;
             }
         </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>

src

里面包含三个文件：index.js + APP.jsx + pages文件夹

index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import APP from './APP'
 
 ReactDOM.render(
     <BrowserRouter>
         <APP/>
     </BrowserRouter>,
     document.getElementById('root')
 )

APP.jsx

一般我们是把写好的App.jsx放到index.js中去，react脚手架中一切皆组件，我们需要拆分组件模块，进行封装

 import React from "react";
 import { NavLink, Route, Routes } from "react-router-dom";
 import Home from './pages/Home'
 import About from './pages/About'
 
 export default function APP(){
     return (
         <div>
             <div className="row">
                 <div className="col-xs-offset-2 col-xs-8">
                     <div className="page-header"><h2>React Router Demo</h2></div>
                 </div>
             </div>
             <div className="row">
                 <div className="col-xs-2 col-xs-offset-2">
                     <div className="list-group">
                     {/* 路由链接 */}
                     <NavLink className='list-group-item' to='/about'>About</NavLink>
                     <NavLink className='list-group-item' to='/home'>Home</NavLink>  
                     </div>
                 </div>
                 <div className="col-xs-6">
                     <div className="panel">
                         {/* 注册路由 */}
                         <Routes>
                             <Route path='/about' element={<About/>}/>
                             <Route path='./home' element={<Home/>}/>
                         </Routes>
                     </div>
                 </div>
             </div>
         </div>
     )
 }

pages

里面有两个文件：Home.jsx 与 About.jsx

Home.jsx

 import React from 'react'
 
 export default function Home() {
     return (
         <h3>我是Home的内容</h3>
     )
 }

About.jsx

 import React from "react";
 
 export default function About(){
     return (
         <h3>我是About的内容</h3>
     )
 }

两张都是脚手架启动后最初的模样，由于没有配置重定向，也就是初始化的页面，刚开始需要显示什么，所以我们看到的就是什么都没有显示的状态，于是再下一节内容里面，我们将添加重定向，也就是让页面一开始就选中一个，开始进行展示

React14-React Router v6入门