如何通过react路由传递数据

Question

我需要这条路由向CreateRoom组件传递更多的数据。有人能帮我讲解语法吗？

<Route path="/" component={CreateRoom} />

Answer 1

在这种情况下使用钩子的正确解决方案应该是从您链接到上面指定的路由的任何地方传递状态，并使用CreateRoom组件中的useLocation钩子来访问状态。

但是，如果您想访问此路径，则需要从链接到此路径的每个位置传递道具。

例如：

<Link to={{pathname: "/", state = data }} />

或者使用history.push：

const RandomComponent = (props) => {
    const history = useHistory();

    const forwardToPage = () => {
        history.push({ pathname: "/", state: data})
    }
}

在您的CreateRoom组件中：

const CreateRoom = (props) => {
   const location = useLocation(); //This is imported from react-router-dom
   
   const data = location?.state;

   return(...)

} 

Answer 2

你应该使用Link来发送它

<Link to={{ pathname: "/CreateRoom", state: data }} >

然后通过以下方式接收它：

 props.location.state

Answer 3

您还可以使用历史记录传递数据，并在该组件上访问它。

props.history.push({
         pathname:"/CreateRoom",
         state:{
             userId:"1"
             ...
          }
 });

您可以像props.location.state.userId一样访问