React如何添加路由参数-useSearchParams传参

1
2
3
4
5
6
7

      const queryParams = new URLSearchParams({
        name: "张三",
        age: "18",
        address: "北京",
      });

      navigate(`/button_page?${queryParams.toString()}`);

1

    <Link to={`/button_page?name=ksnow&address=beijing&age=10`}> 第二种跳转页面</Link>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import { Button } from "antd";
import React from "react";
import { Link, useNavigate } from "react-router-dom";

const HomePage = () => {

  const navigate = useNavigate();

  function handleButtonClick() {
    console.log("click");
    // navigate(`/button_page?name=ksnow&address=beijing&age=10`);

    const queryParams = new URLSearchParams({
      name: "张三",
      age: "18",
      address: "北京",
    });

    navigate(`/button_page?${queryParams.toString()}`);

  }
  return (
          <div>
            <h1>Home Page</h1>
            <Button type="primary" onClick={handleButtonClick}>第一种跳转按钮页面</Button>
            <Link to={`/button_page?name=ksnow&address=beijing&age=10`}> 第二种跳转按钮页面</Link>

          </div>
  );
};

export default HomePage;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import React, { useState } from 'react';
import './ButtonPage.css';
import { useParams, useSearchParams } from 'react-router-dom';

interface ButtonPageProps {

}
    
const ButtonPage: React.FC<ButtonPageProps> = () => {
    ;
    const [size, setSize] = useState('large')
    const [searchParams, setSearchParams] = useSearchParams(); // 获取查询参数

  // 从 searchParams 中读取查询参数
  const name = searchParams.get('name') || '';
  const age = searchParams.get('age') || '0';
  const address = searchParams.get('address') || '';
  console.log(`接收到的参数：name=${name}, age=${age}, address=${address}`);

    const handleSizeChange = (e: any) => {
        setSize(e.target.value);
    };
    return (
        <div>
       
            <p>姓名: {name}</p>
            <p>年龄: {age}</p>
            <p>地址: {address}</p>

        </div>
    )
};

export default ButtonPage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React from 'react';
import { Routes as ReactRoutes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import PluginsPage from './pages/PluginsPage';
import MinePage from './pages/MinePage';
import ButtonPage from './pages/ButtonPage';

const Routes = () => (
  <ReactRoutes>
    <Route path="/" element={<HomePage />} />
    <Route path="/plugins" element={<PluginsPage />} />
    <Route path="/mine" element={<MinePage />} />
    <Route path="/button_page" element={<ButtonPage />} />
  </ReactRoutes>
);

export default Routes;