javascript - react : Invoke redirect to page, 并传递参数

Question

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

重定向到另一个页面(一个组件)

browserHistory.push(pathToMyComponent)

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

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

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

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

<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}
  }); 
}

然后您将能够从您的位置的状态获取该数据。

查看此 here 的文档.

编辑:

要使用 this.context.router，请将其添加到您的组件类中:

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