浅析react-router V6 如何传递参数

什么是路由？

单页应用（英语：single-page
application，缩写SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。

这种方法避免了页面之间切换打断[用户体验]，使应用程序更像一个桌面应用程序

路由是 根据不同的 url 地址 展示 不同的内容或页面。

一个针对 React 而设计的路由解决方案、可以友好的帮你解决 React components 到 URl 之间的同步映射关系
前端老兵，公众号：前端爱好者
react-router 学习总结

路由使用

路由方法导入

import React, { Component } from 'react';

import {HashRouter, Routes ,Route} from 'react-router-dom' 

路由跳转方式

Link、NavLink

声明式导航

<NavLink to='/home' className={({ isActive }) => isActive ? "selected" : ""}>HOME</NavLink>
<NavLink to='/about' className={({ isActive }) => isActive ? "selected" : ""}>ABOUT</NavLink>

navigate() 路由跳转

编程式导航

• 导入一个 useNavigate钩子函数
• 执行 useNavigate 函数得到 跳转函数
• 在事件中执行跳转函数完成路由跳转

import React from "react";
import { Route, Routes, useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();
  return (
    <div>
      <div>
        {/* 编程式导航导航 */}
        <button
          onClick={() => {
            navigate("/child1");
          }}
        >
          onClick: go to child1
        </button> 
      </div> 
    </div>
  );
}

export default App;

路由传参

场景：跳转路由的同时，有时候要需要传递参数

由于v6把旧版本中的路由组件能收到的三个参数(Location，history，match) 移除了，

所以 不能直接使用this.props.location.pathname 获取到当前路由。而且 withRouter也移除 了。

那么如何传参呢？请往下看:

searchParams 传参

查询字符串传参的方式比较简单，参数的形式以 问号拼接 到地址后面

路由传参

import { useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      <button onClick={() => navigate('/about?id=1001')}>go index</button>
    </div>
  )
}
export default Login

路由取参

import { useSearchParams } from 'react-router-dom'

const About = () => {
  const [params] = useSearchParams()
  let id = params.get('id')
  return <div>this is about {id}</div>
}

export default About

params 传参

params 方式传参要求会多一些，需要我们在路由表配置的位置添加一个 参数占位。

路由表配置的位置添加参数占位

const router = createBrowserRouter([
  {
    path: '/about/:id', // 注意这里 
    element: <About />,
  },
])

export default router

路由传参

import { useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      <button onClick={() => navigate('/about/1001')}>go index</button>
    </div>
  )
}
export default Login

路由取参

import { useParams } from 'react-router-dom'

const About = () => {
  const params = useParams()
  let id = params.id
  return <div>this is about {id}</div>
}

export default About

总结

路由跳转方式

• Link、NavLink

<NavLink to='/home'></NavLink>

• navigate() 路由跳转

onClick={() => {
    navigate("/child1");
}}

路由传参

• searchParams 传参 – useSearchParams
• params 传参 – useParams

参考文档：

• react router v6 中文文档: http://www.reactrouter.cn/