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

Question

im trying to render something like whatsapp, in the main screen you got all the groups rendered, and when you click on a group then a new route become active and the main screen disabled, i want that when the user click on the group (its a object of course) then the route that will respond to that event will somehow get the group object of the component that contain the to the group.

ill show you a description of the code:

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

in the groupsScreen component each single group component get a group object that related to her, inside the group representation in the main screen you can click on it and it will route you to /conversation_area, now i know i can pass the name of the group in the url for example and than iterate over this.state.groups and this will work, but i wonder if there is a better way to communicate between link and a route...

the group component is simple, just a component that get a group object in his props, and a that wrap all the design of the group.

thanks alot!

score 1 · Accepted Answer · answered Oct 01 '18 at 01:25

1

If you have the groups in state, you could filter state to only pass in the value that you want to.

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

I'd restructure the code here and use the component prop to pass in a component. Keep the Routing simple, it'll save you a lot of hassle later on.

answered Oct 01 '18 at 01:25

Strahinja Ajvaz

1,706
4
15
33

Thanks for the answer, did you ment in your code: this. state.groups.find(...)? In addition i wonder if there is a way to pass the prop without passing just the group id in the url, like a connection between the link components and the route – אריאל טרבלסי Oct 01 '18 at 02:03
Im sorry, i dont quite understand what you asked. – Strahinja Ajvaz Oct 01 '18 at 02:05
Nevermind, i just was looking for a better way instead of iterating over the array and find the specific group that clicked by the used. – אריאל טרבלסי Oct 05 '18 at 22:55

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

1 Answers1