react-router之参数传递

例子

import { Routes, Route, useNavigate, NavLink,useParams, Link,Outlet,useSearchParams,useLocation } from "react-router-dom";
import React,{ useEffect } from "react";

export default function App() {
  // 通过路径传递参数，跳转的时候传递参数
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />}>
          {/* 通配符接收参数 */}
          <Route path=":id" element={<Detail />} />
        </Route>
      </Routes>
    </div>
  );
}

function About() {
  // 接收search参数
  const [searchParams] = useSearchParams();
  console.log(searchParams.get("name"),searchParams.get("age"));

  const arr = [{id:1},{id:2}]
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>That feels like an existential question, don't you think?</p>
      </main>
      <nav>
        {arr.map(_i => (<Link key={_i.id} to={`/about/${_i.id}`}>跳转到{_i.id}</Link>))}
        <Outlet/>
        {/* 传递state参数 */}
        <Link to="/" state={{name:"state",age:18}}>Home</Link>
      </nav>
    </>
  );
}

function Detail(){
  const params = useParams();
  useEffect(()=>{
    console.log(params);
  },[])

  return (
    <>
    <h2>id:{params.id}</h2>
    </>
  )
}

function Home() {
  // 接收state参数
  const {state:{name,age}} = useLocation()
  console.log("name",name,"age",age);
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        {/* 传递search参数 */}
        <Link to="/about?name=search&age=18">About</Link>
      </nav>
    </>
  );
}

知识点

方式一:通配符传参

语法

• 通过占位符:id来定义参数，占位符所在的路径就是参数
• 我们通过useParams来进行获取参数

路由

优缺点

优点
参数在路径上面体现，刷新页面不会丢失参数
缺点

• 只能传递字符串
• 复杂的参数可以由JSON.stringify

方式二：search传参

语法

• 传递:<Link to="/about?name=search&age=18">About</Link>
• 接收

 const [searchParams] = useSearchParams();
 console.log(searchParams.get("name"),searchParams.get("age"));

路由

/about?name=sunwukong&age=18

优缺点

• 页面刷新不会导致参数丢失

方式三:state传参

语法

• 传递:<Link to="/" state={{name:"state",age:18}}>Home</Link>
• 接收:const {state:{name,age}} = useLocation()
  • 这里是使用了ES6的解构语法，所以一定要注意解构的变量是否存在

路由

不在路径中传递参数

优缺点

• 界面刷新不会导致参数丢失
• 状态持续到 location
• 初始化的页面尽量不要使用当前的传参方式进行传参