在 react-router-dom 中将参数传递给没有 url 的路由

Question

我正在尝试渲染类似 whatsapp 的东西，在主屏幕中你得到了所有的组渲染，当你点击一个组然后一个新的路线被激活并且主屏幕被禁用，我希望当用户点击该组时（当然是一个对象）那么响应该事件的路由将以某种方式获取包含该组的组件的组对象。

我将向您展示代码的描述：

<Route exact path="/" render={props => (
    <GroupScreen groups={this.state.groups} />
)} />
<Route exact path="/conversation_area" render={props => (
    <h1>bla bla</h1>
)} />

在 groupsScreen 组件中，每个单独的组组件都获得一个与她相关的组对象，在主屏幕的组表示中，您可以单击它，它会将您路由到 /conversation_area，现在我知道我可以在 url 中传递组的名称，例如，而不是迭代this.state.groups 这会起作用，但我想知道在 link 和路由之间是否有更好的通信方式...

组组件很简单，就是一个在他的props中获取一个组对象的组件，以及一个包装组所有设计的组件。

非常感谢！

Answer 1

如果您的组处于状态中，则可以过滤状态以仅传递您想要传递的值。

<Route exact path="/conversation_area/:group_id" render={props => {
    // filter out the object that you need from the groups.
    const group = props.find(group => props.match.params.group_id === group.id)

    // you now have access to that group information.
    return (
        <h1>bla bla</h1>
)}} />

我会在这里重组代码并使用 component prop 传入一个组件。保持路由简单，以后会省去很多麻烦。

在 react-router-dom 中将参数传递给没有 url 的路由

pass parameters to route without the url in react-router-dom

javascript

reactjs

react-router-v4

react-router-dom