react-router6版本的学习笔记。
React Router 6版本是从2021年11月开始,便是默认版本了。
提示:因为router6版本新增了多个hook,所以官方明确推荐函数式组件。
rsf + tab 快捷键快速生成函数式组件。
# 安装react-router-dom6版本
yarn add react-router-dom
# 或者
"react-router-dom": "^6.6.2"
router6版本移除了Switch,让Routes替换了Switch。
router6版本的Route中的属性component 变化为了 element如下:
<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
简单的示例:
import React from 'react';
import {NavLink,Routes,Route} from 'react-router-dom'
import About from "./pages/About";
import Home from "./pages/Home";
function App(props) {
return (
<div>
<h1>App</h1>
<div>
<NavLink to="/about">About</NavLink>
<br/>
<NavLink to="/home">Home</NavLink>
</div>
<div>
<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
</div>
</div>
);
}
export default App;
别忘记入口文件包裹,添加BrowserRouter:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root'))
router6移除了Redirect,取而代之的是Navigate。
还需要注意replace属性用来控制跳转模式(默认为push模式)。
NavLink组件是高亮效果是通过active类展示的。
useRoutes很好用,一般项目中,都要单独写出来。
import React from 'react';
import {NavLink,useRoutes} from 'react-router-dom'
import About from "./pages/About";
import Home from "./pages/Home";
function App(props) {
// fixme useRoutes的使用
const element = useRoutes([
{
path:'/about',
element:<About/>
},
{
path:'/home',
element:<Home/>
},
])
return (
<div>
<h1>App</h1>
<div>
<NavLink to="/about">About</NavLink>
<br/>
<NavLink to="/home">Home</NavLink>
</div>
<div>
{element}
</div>
</div>
);
}
export default App;
路由参数为:
使用useParams hook和useMatch hook来实现params参数传递:
使用useSearchParams hook:
路由链接格式:
使用useLocation hook函数格式如下:
useInRouterContext hook函数:就是用来判断是否在路由的山下文中。