开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情

二、重定向

只需要对APP.jsx里面的注册路由里面，添加一条空路径的清空，即可完成重定向

                 <div className="col-xs-6">
                     <div className="panel">
                         <div className="panel-body">
                             {/* 注册路由 */}
                             <Routes>
                                 <Route path='/about' element={<About/>}/>
                                 <Route path='/home' element={<Home/>}/>
                                 <Route path='/' element={<Navigate to='/about'/>}></Route>
                             </Routes>
                         </div>
                     </div>
                 </div>

三、NavLink高亮

在APP.jsx的基础上添加

     function computedClassName({isActive}){
         return isActive ? 'list-group-item atguigu' : 'list-group-item'
     }

还需要将这里的className属性改成我们自己写的css代码

                 <div className="col-xs-2 col-xs-offset-2">
                     <div className="list-group">
                         {/* 路由链接 */}
                         <NavLink className={computedClassName} to='/about'>About</NavLink>
                         <NavLink className={computedClassName} to='/home'>Home</NavLink>  
                     </div>
                 </div>

四、useRoutes路由表

在两个地方进行更改：

一个是APP.jsx，

需要在开头添加规则

const element = useRoutes(routes)

之后是在注册路由的地方

{element}

直接这样就可以了，不用像原来那样：

{/* 注册路由 */} <Route path='/about' element={}/> <Route path='/home' element={}/> <Route path='/' element={}>

需要写很多重复的内容

完整代码

 import React from "react";
 import { useRoutes, NavLink} from "react-router-dom";
 import routes from './routes'
 ​
 export default function APP(){
     //根据路由表生成对应的路由规则
     const element = useRoutes(routes)
     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">
                         <div className="panel-body">
                             {/* 注册路由 */}
                             {element}
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     )
 }

routes文件夹

还需要在src目录下创建一个文件夹：routes，专门来保存路由链接，这是在v6版本里面独有的，区别于原来的router5

 import { Navigate } from "react-router-dom";
 import About from '../pages/About';
 import Home from '../pages/Home'
 ​
 export default [
     {
         path:'/about',
         element:<About/>
     },
     {
         path:'/home',
         element:<Home/>
     },
     {
         path:'/',
         element:<Navigate to='/about'/>
     }
 ]