React JS：以编程方式使用 React-Router 发送道具 [重复]

Posted 2023-02-21

【中文标题】React JS：以编程方式使用 React-Router 发送道具 [重复]

【英文标题】：React JS: Programmatically use React-Router to send props [duplicate]

【发布时间】：2018-05-02 19:13:59

【问题描述】：

这个问题想要弄清楚的很简单：

“我可以通过编程方式将道具从一个场景发送到另一个场景吗？如果可以，如何发送？”

下面我提供了一组示例代码，希望有人有知识一劳永逸地解决这个问题。

App.js 文件：

const Main = () => (
    <main>
        <Switch>
            <Route exact path='/Job' component=Job/>
            <Route path='/Preview' component=Preview/>
        </Switch>
    </main>

Job.js：

长话短说，一旦用户点击提交，文件就会接受输入和输出，这个函数被调用：

 handleClick()
    //The state I wish to pass: this.state.propToPass
    //my current implementation for moving to the correct scene:
    this.props.history.push('/Preview')

Preview.js

constructor(props)
    super(props)
    //console.log(the prop that has been sent)

我将永远感激任何了解问题并能阐明我的困境的人。

非常感谢。

【参考方案1】：

下面是withRouter 的示例。这是一个高阶函数，它返回连接了路由器的子组件，因此您可以通过编程方式切换路由。

通过发送一个对象而不仅仅是一个字符串来移动到答案。您可以通过在名为 state 的对象中附加一个属性来指定要作为状态发送的数据，该属性将包含您要发送的数据。

import React from 'react';
import withRouter from 'react-router-dom';

class Test extends React.Component 
  _handleClick = () => 
    this.props.history.push(
      pathname: '/roster',
      state: 
        'hello': 'world',
      
    );
  
  render() 
    return (
      <button onClick=this._handleClick>Go To Roster Programmatically</button>
    )
  


export default withRouter(Test);

【讨论】：

不确定这如何适用于手头的问题，这会进入我的 Jobs.js 文件吗？我如何从 preview.js 文件中访问道具？

@JDorrian 啊，我的代码沙箱没有保存，它粘贴了错误的版本。请参见上面的示例。在烘焙机中，您将能够访问props.location.state，您将找到 hello: 'world' 。

非常感谢，我已经尝试了好几个小时了，你让我很开心！

@JDorrian 没问题！很抱歉造成混乱:)

【参考方案2】：

我强烈推荐使用redux-form，因为它使用reducer 来保存表单的状态。然后，在路由到所需的组件之后，您可以将该组件连接到表单状态以及获取所需的信息。 它是一个功能强大的工具，可以帮助您管理表单的状态，听起来正是您所需要的。

【讨论】：

抱歉@gilad 我在发布此内容时进行了一些编辑以使其更清晰，我已更新代码以使其更能反映实际问题。

这里的问题是，当我改变场景时，我无法将道具与历史一起发送，我认为这本来是一件容易的事情，但似乎无法找到正确的方法任何地方

我编辑了答案，希望对您有所帮助。

我不熟悉 Redux，所以我尽量避免在这个项目中使用它。我开始认为如果不使用 redux 就无法做到这一点：'（无论如何谢谢 Gilad