个人录制的最新Vue项目学习视频:B站
目录
2.6.2 编程式导航 (注意HOOK使用 类组件不可以直接使用)
一、对比 V5路由
<Route> 特性变更
path:与当前页面对应的URL匹配。
element:新增,用于决定路由匹配时,渲染哪个组件。代替v5的component和render。
<Routes>代替了<Switch>
<Outlet></Outlet>让嵌套路由更简单
useNavigate代替useHistory
移除了<NavLink/>的 activeClassName 和 activeStyle
钩子useRoutes代替react-router-config
移除了exact
路由官网:https://reactrouter.com/en/v6.3.0/api
二、路由使用步骤
2.1 引入库文件
引入最新的reac-router-dom
$ yarn add react-router-dom@6
npm
$ npm install react-router-dom@6
目前安装react项目 默认已经是v6版本了 不需要特殊加版本号
2.2 首页引入Router
我这里引入的是HashRouter,还有一种BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter,HashRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
2.3 路由用法
一级路由与多级路由
<Routes>
{/*<Route path="/" element={<Film/>}/>*/}
<Route index element={<Film/>}/>
<Route path="/film" element={<Film/>}/>
<Route path="/cinema" element={<Cinema/>}/>
<Route path="/center" element={<Center/>}/>
</Routes>
- index用于嵌套路由,仅匹配父路径时,设置渲染的组件。
- 解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候,可以增加index属性来指定默认路由。
2.4 重定向
使用 Navigate 组件替代
<Routes>
<Route path="/film" element={<Film />} />
<Route path="/cinema" element={<Cinema />} />
<Route path="/center" element={<Center />} />
<Route path="*" element={<Navigate to="/film" />} />
</Routes>