Question

我正在构建我的第一个React应用程序。在我的代码中，我使用

重定向到另一个页面（一个组件）

browserHistory.push(pathToMyComponent)

我也尝试过react-router Link-element。 Link元素使我能够将数据传递到目标组件，而不会显示在URL中，如下所示：

<Link to={`/myComponent/${someData}`}>

但现在我不想创建一个链接。相反，我想在按下按钮时执行一些操作，然后使用一些计算数据重定向。我该怎么做？

编辑：这是我的代码。在登录页面中，用户可以执行Facebook登录。我想要的是在登录成功后将用户重定向到大厅。我想将用户ID传递到大厅。

<Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
   <Route path="/" component={LoginPage}/>
   <Route path="/lobby" component={Lobby}/>
</Router>

这是我在阅读你的答案后写的。执行此操作时，日志将打印Uncaught TypeError: Cannot read property 'context' of null

this.context.router.push({ //browserHistory.push should also work here
     pathname: '/lobby',
     state: {userid: authData.uid}
});

Edit2：你的意思是这样的？它给出了语法错误。

class LoginPage extends React.Component {

  contextTypes = {
    router: React.PropTypes.object
  };
  constructor(props){
    super(props);
...
...

Answer 1

我会创建一个带有onClick事件处理程序的普通按钮，它会触发一个函数。在此功能中，您可以计算所需的数据，然后最终对路由器执行push。

示例：

render() {
  return (
    ...
    <button onClick={this._handleButtonClick}>Click me</button>
    ...
  );
}

_handleButtonClick = () => {
  //calculate your data here
  //then redirect:
  this.context.router.push({ //browserHistory.push should also work here
    pathname: pathToMyComponent,
    state: {yourCalculatedData: data}
  }); 
}

然后，您就可以从location state获取该数据。

查看此here的文档。

修改

使用this.context.router在您的组件中添加此内容＆＃39;类：

static contextTypes = { router: React.PropTypes.object }

Answer 2

我在这里找到了一个简单的技巧：

<Link
  to={{
    pathname: "/profile",
    data: data // your data array of objects
  }}
>
  
//in /profile
  render() {
  const { data } = useLocation().data;
  return (
    // render logic here
  )
}

React：调用重定向到页面，并传递参数

2 个答案: