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
结果: