2分钟学会react-router(v6版)

虽然react-router v6的官方文档洋洋洒洒万字有余,但实际上开发中常用的也就那么几个,掌握本文所述内容应对开发就足够了,接下来就跟着笔者一起来梳理一下吧

安装

yarn add react-router

初始化

  • 创建路由表

在根目录下新建router.ts文件夹,并新建index.ts文件

import { createHashRouter } from "react-router-dom";
// 具体的路由页面
import User from "../pages/user";
// 创建hash路由
const router = createHashRouter([
  {
    path: "/",
  },
  {
    path: "/user",
    Component: User,
  },
]);

export default router;
  • 全局注入

main.ts中引入路由表并注册

...
import ReactDOM from "react-dom/client";
...
import store from "./store";
import { Provider } from "react-redux";
...
ReactDOM.createRoot(...).render(
  ...
    <Provider store={store}>
      ...
    </Provider>
  ...
);

语法与实践

  • 嵌套路由

1.定义路由表

嵌套路由通过children属性实现,它是一个数组,数组的每一项都是一个独立的路由配置

import { createHashRouter } from "react-router-dom";
...
import Nested from "../pages/router/index";
import NestedA from "../pages/router/a";
import NestedB from "../pages/router/b";

const router = createHashRouter([
  ...,
  {
    path: "/nested",
    // 嵌套根路由
    Component: Nested,
    children: [
      {
        // 嵌套的子路由
        path: "/nested/a",
        Component: NestedA,
      },
      {
        path: "/nested/b",
        Component: NestedB,
      },
    ],
  },
]);

export default router;

2.设置路由出口

找到嵌套根路由,设置路由出口

// src/pages/nested/index.tsx
import { Outlet } from "react-router-dom";

function Nested() {
  return <>嵌套路由 <br/>
    <Outlet/>
  </>;
}

export default Nested;

3.预览

  • 动态路由

提供:xxx作为占位符,xxx可以任意的路径片段

1.定义路由表

import Dy from '../pages/router/dy';
const router = createHashRouter([
  ...,
  {
    path:'/dy/:id',
    Component:Dy
  }
]);

2.定义动态路由

:xxx部分可以通过useParams钩子获取

// src/pages/router/dy.tsx
import { useParams } from 'react-router-dom';

function Dy() {
  const params = useParams()
  return <>动态路由:{params.id}</>;
}

export default Dy;

3.预览

  • 路由重定向

业务中使用重定向的一般指的就是在/时,要跳转到默认的预定路由,这可以通过loader+redirect实现

1.定义路由表

import { createHashRouter,redirect } from "react-router-dom";
...
import Redirect from '../pages/router/redirect';

const router = createHashRouter([
  {
    path: "/",
    loader:()=>{
      throw redirect("/redirect")
    }
  },
  ...,
  {
    path:'/redirect',
    Component:Redirect
  }
]);

export default router;

2.预览

  • 路由导航与参数传递

使用useNavigate钩子导航路由,使用useParamsuseLocationuseSearchParams获取导航携带的参数

1.导航

...
import { Button } from "antd";
import { useNavigate } from "react-router-dom";

function Nested() {
  const navigate = useNavigate();
  const handleRouterChange = () => {
    // 执行路由跳转
    navigate('/push?id=1',{
      state:99
    })
  };
  return (
    <>
      ...
      <Button type="primary" onClick={handleRouterChange}>
        跳转
      </Button>
    </>
  );
}

export default Nested;

2.获取参数

useParams钩子用来获取动态路由的参数

// src/pages/router/dy.tsx
import { useParams } from "react-router-dom";
const params = useParams()
// xxx即定义的动态路由名称
params.xxx

useSearchParams用于获取url中的查询参数,即?后的部分

// src/pages/router/push.tsx
import { useSearchParams } from "react-router-dom";
const [searchParams] = useSearchParams();
// xxx即查询参数的某一个key
searchParams.get('xxx')

useLocation用于获取state传参

// src/pages/router/push.tsx
import { useLocation } from "react-router-dom";
const { state } = useLocation();

源码

react-blob下的react-router分支

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React中使用react-router-dom v6进行跳转的方法如下: 1. 首先,确保你已经安装了react-router-dom v6。你可以使用以下命令进行安装: ```shell npm install react-router-dom@next ``` 2. 在你的组件中引入所需的API: ```javascript import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom'; ``` 3. 在你的组件中使用`Router`组件包裹你的路由: ```javascript export default function App() { return ( <div className="app"> <Router> {/* 在这里定义你的路由 */} </Router> </div> ); } ``` 4. 使用`Routes`组件定义你的路由规则,并使用`Route`组件定义每个具体的路由: ```javascript export default function App() { return ( <div className="app"> <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> {/* 其他路由规则 */} </Routes> </Router> </div> ); } ``` 5. 在需要进行跳转的地方,使用`Link`组件或`Navigate`组件进行跳转: - 使用`Link`组件: ```javascript import { Link } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <Link to="/about">Go to About</Link> </div> ); } ``` - 使用`Navigate`组件: ```javascript import { Navigate } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <button onClick={() => <Navigate to="/about" />}>Go to About</button> </div> ); } ``` 请注意,以上是react-router-dom v6的用法,与v5有一些不同。在v6中,`<Switch>`组件被替换为`<Routes>`组件,`<Redirect>`组件被替换为`<Navigate>`组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

潘苏苏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值