Question

如何传递特定<div/>显示的信息，以便我可以在我导航到的路线中显示该特定信息？

谢谢你，并接受/ upvote回答

Answer 1

我不完全确定我理解您的确切问题，但我认为您只是想将params传递到导航到使用<Link>的路线

看看这个：https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

在文档中，关于to道具说：

位置描述符。通常这是一个字符串或对象[...]

如果它是一个对象，它可以有四个键：



pathname：表示要链接的路径的字符串。



query：键的对象：要进行字符串化的值对。 [...]

这个例子：

<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
  Hello
</Link>

所以你的情况可能如下：

render() {
  var profile = this.props.profile;
  var query = {
    firstName: profile.firstName,
    lastName: profile.lastName
  };

  return (
    <Link to={{ pathname: '/details', query: query }}>
      <div>
        <div>
          {profile.firstName}
        </div>
        <div>
          {profile.lastName}
        </div>
      </div>
    </Link>
  )
}

然后，您的详细信息页面应该能够访问来自this.props.routeParams对象的参数，该对象将包含您传递的查询参数

Answer 2

也许你可以尝试这样的事情：

您的路由器：

<Router history={hashHistory}>
  <Route component={Root} path='/'>
    <IndexRoute component={Profile}/>
    <Route component={Details} path='details/:id'/>
  </Route>
</Router>

然后您可以创建类似

的链接

<Link to="details/profile">Profile</Link>

然后在内部细节中，您可以使用

检查传递的ID

this.props.params.id

然后根据该ID，您可以显示您的数据。

ReactJS导航到使用路由器？

2 个答案: