反应路由器，以编程方式导航时传递数据？

Question

我们可以使用

导航到不同的路径

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

有没有办法在导航时发送参数（对象）？

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

我可以嵌入对象的 ID 并从服务器重新获取对象从新页面。
或者我可以将对象存储在像 redux store 这样的全局存储中。（这个对象需要尽快从商店中删除。所以我认为一开始就把它放在那里可能不太好）

Answer 1

在 React 路由器中以编程方式导航时传递查询参数

可以使用历史对象以编程方式使用 history.push 和 history.replace 更改当前位置。

    history.push('/home?the=query', { some: 'state' })

如果我们将历史对象作为 props 向下传递到组件中。然后我们可以使用历史对象上可用的反应路由器方法以编程方式导航。

现在假设您将历史对象作为一个名为 'router' 的道具传递下去。所以它会在一个组件中被引用，组件内部使用基于 class 的语法，例如：

this.props.router

使用 push 或 replace 时，您可以将 URL 路径和状态指定为单独的参数，或者将所有内容都包含在单个 location-like 对象中作为第一个参数。

this.props.router.push('/some/path?the=query')

或者您可以使用单个 location-like 对象来指定 URL 和状态。这相当于上面的例子。

this.props.router.push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

注意 - 当然要确保 this.props.router 实际上是来自 react-router api.[=14= 的历史对象]

Answer 2

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

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

在导航到的页面上，当前location会被注入到路由匹配的组件中，所以你可以使用this.props.location.state访问状态。

要记住的一件事是，如果用户直接导航到页面，将不会有 state，因此当数据不存在时，您仍然需要一些机制来加载数据。

Answer 3

我无法使用 react-router v4+ 进行此操作。但以下确实有效：

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.push('/takeTest', {
  subjectsList: this.props.subjectsList.filter(f => f.isChecked === true)
})

Answer 4

当前答案已过时。

反应路由器 6:

使用 useNavigate 钩子：

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

然后，您可以通过 useLocation 挂钩访问 '/other-page' 中的状态数据：

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

反应路由器 4 或 5:

调用history.push，并传递一个对象作为第二个参数来传递状态：

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

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

props.location.state

Answer 5

如果你想在查询字符串中发送它

this.props.router.push({
  pathname: '/payment-history',
  query: {
    email: rowData.email
  }
})

Answer 6

你可以使用 react-router-dom.

的 useHistory hook

下面的代码是让你把你的数据传递到指定的路线，即 "/dashboard".

let history = useHistory();

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

并且从 "/dashboard " 您可以使用 useHistory() 来接收上述数据。

以下代码用于接收数据。

const Dashboard =()=>{

 let {location} = useHistory();

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

Answer 7

对于功能组件和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 8

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

记住： 在 react-router-dom v6 中你可以使用 hooks 代替。

版本5.X

假设我们有两个组件 first 和 second。第一个有 link 将针对第二个组件。

第一个 Component link 所在的位置，通过单击 link 您将转到目标路径，在我的例子中是："/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>
</>
)
}

现在，在第二个 Component 中，您可以访问传递的对象：

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 中，尽管您可以使用功能组件，但上述方法不适用于 class 组件通过使用 useLocation 挂钩做出反应，然后您可以通过另一个组件中的该位置绘制状态对象。

版本 6

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

假设我们有两个功能组件，第一个组件 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;

反应路由器，以编程方式导航时传递数据？

React router, pass data when navigating programmatically?

reactjs

react-router

react-redux