如何在react中使用导航函数传递参数给路由?

Question

是否有一种方法可以将一些参数传递给导航函数是react的路由?我找到了下面的方法，但它不起作用，因为第二个文件中的route参数是未定义的。

import { useNavigate } from 'react-router-dom'
const exploreTopic = () =>{
navigate(`/topic/${props.id}`,{id:props.id});
};
return(
<div onClick={exploreTopic}>smth</div>
)

import { useParams } from 'react-router-dom'
import './style.css'
const SingleTopic = ({route,navigate}) => {
return (
<div>
{route.params.id}
</div>
)
}
export default SingleTopic

Answer 1

可以这样传递数据

const exploreTopic = () =>{
navigate(`/topic/${props.id}`,{state:{id:props.id}});
};

你的SingleTopic将变成

import {useLocation} from 'react-router-dom';
const SingleTopic = ({route,navigate}) => {
const location = useLocation();
return (
<div>
{location.state.id}
</div>
)
}
export default SingleTopic