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

【问题标题】：React: Invoke redirect to page, and pass parameterReact：调用重定向到页面，并传递参数
【发布时间】：2016-05-01 10:51:28
【问题描述】：

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

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

browserHistory.push(pathToMyComponent)

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

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

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

编辑：这是我的代码。在 loginpage 中，用户可以执行 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);
...
...

【问题讨论】：

标签： javascript reactjs react-router

【解决方案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，请将其添加到您的组件类中：

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

【讨论】：

我以前没有使用过上下文。文档说这是一个实验性功能，将来可能会改变。难道没有别的办法了吗？在许多应用程序中，这感觉像是基本需求。
@hellogoodnight 您在文档中的什么地方看到的？ context 是 react-router 开发人员使用的方式，所以在这一点上是相当官方的。
不是真的，我很难弄清楚如何使用 router.context- 对象。你介意看看我的代码吗？我将编辑问题
@hellogoodnight 试试我上面的编辑。它仅适用于react-router 的 2.0.0 及更高版本
究竟应该添加这个吗？在构造函数内部？控制台说关键字static是reserverd

【解决方案2】：

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

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

【讨论】：