全栈的自我修养 ———— react路由两种传参方法

react路由传参

• 1、传统传参
• • 跳转前:
  • 跳转后:
  • 结果:
• 2、配置传参
• • 跳转前:
  • 配置routes:
  • 跳转后:
  • 结果:

1、传统传参

跳转前:

import { useNavigate } from "react-router-dom";
        <div className='login' onClick={() => navigator('/public/login?id=1')}>
       		<div>您好，<span style={{ color: 'red' }}>请登录</span></div>
       </div>

跳转后:

import { Button } from 'antd'
import { useSearchParams } from 'react-router-dom'
const Login = () => {
    const [params] = useSearchParams()
    console.log(params.get('id'));
    return <div>
        <Button type="primary">这是按钮</Button>
    </div>
}
export default Login

结果:

2、配置传参

跳转前:

import { useNavigate } from "react-router-dom";
    <div className='login' onClick={() => navigator('/public/login/111')}>
        <div>您好，<span style={{ color: 'red' }}>请登录</span></div>
    </div>

配置routes:

      {
        path: '/public/login/:id',
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <LazyLogin></LazyLogin>
          </Suspense>
        )
      },

跳转后:

import { Button } from 'antd'
import { useParams } from 'react-router-dom'
const Login = () => {
    const params = useParams()
    console.log(params.id);
    return <div>
        <Button type="primary">这是按钮</Button>
    </div>
}
export default Login

结果: