передать параметры для маршрута без URL-адреса в реакции-маршрутизатор-дом

Question

я пытаюсь сделать что-то вроде WhatsApp, на главном экране вы видите все группы, и когда вы нажимаете на группу, тогда становится активным новый маршрут, а главный экран отключается, я хочу, чтобы, когда пользователь нажимал наgroup (это, конечно, объект), тогда маршрут, который будет реагировать на это событие, каким-то образом получит объект группы компонента, который содержит группу.

я покажу вам описание кода:

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

в компоненте groupsScreen каждый отдельный компонент группы получает связанный с ней объект группы, внутри представления группы на главном экране вы можете щелкнуть по нему, и он перенаправит вас в / разговор_, теперь я знаю, что янапример, можно передать имя группы в URL, а затем перебрать this.state.groups, и это сработает, но мне интересно, есть ли лучший способ связи между каналом и маршрутом ...

групповой компонент прост, просто компонент, который получает групповой объект в свой реквизит, и это оберткавесь дизайн группы.

спасибо большое!

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

Я бы реструктурировал код и использовал компонент prop для передачи компонента.Сохраняйте простоту маршрутизации, в дальнейшем это избавит вас от многих хлопот.