如何在react中使用navigate函数向路由传递参数？

Question

有没有办法使用 React 的导航功能将一些参数传递给路线？我找到了以下方法，但它不起作用，因为第二个文件中的路由参数未定义。

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

Answer 2

使用

useLocation

：

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

您可以从

{route,navigate}

组件中删除元素

SingleTopic

：

import {useLocation} from 'react-router-dom';

function SingleTopic(){
 const location = useLocation();

  return (
    <div>
        {location.state.id}
    </div>
  )
}

export default SingleTopic