React-router默认路由配置[V5与V6版本]

React-router 路由对比[V5版本 与 V6版本]

1. V5 : Redirect组件

<Redirect to="/home/message"></Redirect>
<Switch>
     <Route path="/home/news" component={News}></Route>
      <Route path="/home/message" component={Message}></Route>
      <Redirect to="/home/message"></Redirect>
    </Switch>

2. V6 : index关键字 || Navigate组件 || 路由表中使用Navigate组件

用在 路由组件 Route中

<Routes> {/* Routes取代了老版本的<Switch/> */}
         <Route path="/Home" element={ <Home/>}></Route>
         <Route path="/About" element={ <About/>}></Route>
         // 方式一
 <Route index element={<ComponentA />} />
 // 方式二
         <Route path="/" element={ <Navigate to="/About"/>}></Route>
     </Routes>

// 方式三: 用在路由表useRoutes 中使用Navigate组件
import { Navigate } from 'react-router-dom'; 
import About from '../pages/About';
import Home from '../pages/Home';

const element = [
    {path:"/home",element: <Home/>},
    {path:"/about",element: <About/>},
    {path:"/",element: <Navigate to={<About/>}/>}
]
export default element

原文地址：https://blog.csdn.net/Blues_han/article/details/136295738

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！