React路由器,以编程方式导航时传递数据？

Question

我们可以使用导航到不同的路径

this.props.router.push('/some/path')

有没有办法在导航时发送params(对象)？

还有其他我可以想到的选择,但是想知道是否可以通过object？

• 我可以嵌入对象的id并从新页面重新从服务器中获取对象.

• 或者我可以将对象存储在全局存储中,如redux store.(这个对象需要很快从商店中删除.所以我认为把它放在那里可能不太好)

Answer 1

React Router使用location对象.location对象的一个属性是state.

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

在导航到的页面上,当前location将被注入到路径匹配的组件中,因此您可以使用该状态访问该状态this.props.location.state.

要记住的一件事是,state如果用户直接导航到页面,则不会出现这种情况,因此当数据不存在时,您仍需要一些机制来加载数据.

Answer 2

如果您使用的是React Router 4或5，则当前答案已过时。调用history.push，并将对象作为第二个参数传递给状态：

props.history.push('/other-page', { id: 7, color: 'green' }))

然后，您可以通过以下方式访问“ / other-page”中的状态数据：

props.location.state

Answer 3

将数据传递到目标组件的最佳方法，只需复制粘贴代码即可看到神奇之处，我也对其进行了深入解释。

请记住：在react-router-dom v6中，您可以使用钩子代替。

版本5.X

假设我们有两个组件，第一和第二。第一个具有将针对第二个组件的链接。

链接所在的第一个组件，通过单击链接，您将转到目标路径，就像我的例子一样："/details"。

import React from 'react';
import {Link} from 'react-router-dom';

export default function firstComponent() {
return(
<>
    <Link to={{
      pathname: '/details',
      state: {id: 1, name: 'sabaoon', shirt: 'green'}
    }} >Learn More</Link>
</>
)
}

现在，在第二个组件中，您可以通过以下方式访问传递的对象：

import React from 'react'


export default class Detials extends React.Component{

    constructor(props){
        super(props);
        this.state={
            value:this.props.location.state,
        }

    }


alertMessage(){
       console.log(this.props.location.state.id);
    }

render(){
return (

    <>
     {/* the below is the id we are accessing */}

      hay! I am detail no {this.props.location.state.id} and my name is 
      {this.props.location.state.name}

      <br/>
      <br/>

 {/* press me to see the log in your browser console */}
<button onClick={()=>{this.alertMessage()}}>click me to see log</button>

    </>

    )
}

}

注意：在react-router-dom的版本6中，上述方法不适用于类组件，尽管您可以通过使用useLocation钩子来使用react的功能组件，然后您可以通过另一个组件中的该位置绘制状态对象。

版本6

如何使用react-router-dom的hooks v6来实现相同的效果

假设我们有两个功能组件，第一个组件 A，第二个组件 B。组件 A 想要与组件 B 共享数据。

钩子的用法： (useLocation,useNavigate)

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

现在我们将获取组件B中的数据。

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

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

Answer 4

它们是使用react-router dom共享数据的用例useNavigate()；比=>

const navigate = useNavigate();
navigate('/toPath', {state: customData})

在其他组件中，假设您想使用另一个钩子来获取数据，即 useLocation()

const location = useLocation()
location.state // data will be shared by navigate

Answer 5

对于功能组件，react-router-dom:^5.2.0让我们举一个非常简单的例子来使概念更加精确

import { useHistory } from "react-router-dom";

  function Sender(){ 
  
  const history = useHistory();

  const goToReceiver = () => {
    history.push("/receiver", { name:'Mr',age:23 });
  }

  return <button onClick={goToReceiver}>Go To Receiver</button>
  }

现在让我们看看数据是如何来的receiver route

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

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

    return <div>
             <p>{location.state.name}</p>
             <p>{location.state.age}</p>
           </div>
  }

Answer 6

您可以使用react-router-dom的useHistory钩子。

下面的代码用于将数据传递到指定的路径“/dashboard”。

let history = useHistory();

history.push({
            pathname: '/dashboard',
            state:{
                tags: 'your-value' 
            }
    });

从 “/dashboard”中，您可以使用 useHistory() 来接收上述数据。

以下代码供您接收数据。

const Dashboard =()=>{

 let {location} = useHistory();

 return (<>{location.state.tags}</>)
}