ReactRoter
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染
基础用法
javascript
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
{ path: "/login", element: <div>我是login组件</div> },
{ path: "/active", element: <div>我是active组件</div> },
{path:"/",element:<App/>}
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// 使用中间件链接 将store注入 react中
<RouterProvider router={router}>
<App />
</RouterProvider>
);
把router单独封装成一个文件
javascript
import { createBrowserRouter } from "react-router-dom";
import Login from "../page/Login";
import Active from "../page/Active";
const router = createBrowserRouter([
{
path: "/login",
element: (
<div>
<Login />
</div>
),
},
{ path: "/active", element: <div>
<Active />
</div> },
]);
export default router;
路由导航跳转
声明式导航
声明式导航是指通过在模版中通过 <Link/>
组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通常使用这种方式进行
javascript
{/* 声明式导航 */}
<Link to="/login">去login页</Link>
路由式导航
编程式导航是指通过 useNavigate
钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转,比如想在登录请求完毕之后跳转就可以选择这种方式,更加灵活
javascript
{/* 编程式导航 */}
<button
onClick={() => {
navigation("/active");
}}
>
去active
</button>
获取参数
serchParams 传参
javascript
// app.js
<button
onClick={() => {
navigation("/active?id=88&name=liis");
}}
>
serchParams 传参
</button>
// 目标组件
const [parms] = useSearchParams();
console.log(parms.get('id')); // 888
params 传参
javascript
app.js
<button
onClick={() => {
navigation("/active/8889/lool");
}}
>
params 传参
</button>
//目标组件
const parms = useParams();
console.log(parms); // {id: '8889', name: 'lool'}
注意使用params传参时需要修改router路径
javascript
{
path: "/active/:id/:name",
element: (
<div>
<Active />
</div>
),
}
嵌套路由配置
在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由
javascript
// 路由配置
{
path: "/login",
element: <Login />,
children: [
{
index:true ,// 配置默认二级路由
element: <LoginA />,
},
{
path: "b",
element: <LoginB />,
},
],
},
//页面通过固定组件Outlet接收
<div>
my name is login
<div>
<Link to="a">go A</Link>
<Link to="b">go B</Link>
<Outlet/>
</div>
</div>
两种路由模式
各个主流框架的路由常用的路由模式有俩种,history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建
路由模式 | url表现 | 底层原理 | 是否需要后端支持 |
---|---|---|---|
history | url/login | history对象 + pushState事件 | 需要 |
hash | url/#/login | 监听hashChange事件 | 不需要 |
useMemo
useMemo
是一个 React Hook,它在每次重新渲染的时候能够缓存计算的结果。
javascript
const cachedValue = useMemo(calculateValue, dependencies)