Search code examples
reactjsreact-routerreact-reduxreact-router-reduxreactstrap

Passing custom props in link


I am trying to figure out how to pass custom prop in NavLink.I am using Server side rending and reactstrap. The flow is I get the list of data from backend and create Navlinks for it.When user will click on the Navlinks instead of again getting the same data It should show the data which i initially retrieved from backend and i passed as props to this.

This code would create the Navlink:

 this
            .props
            .activeData
            .map((data, idx) => (
              <div key={idx}>
                <NavLink
                  dataItems={data}
                  tag={MLink}
                  to={`/dashboard/data/datainfo/${data._id}`}
                  activeClassName="active"><DataInfo dataItems={data}/></NavLink>
              </div>
            ))

DataInfo is a component to depict the Navlinks.

When the user clicks on the above it should route to other page (Details)which should render from data.This is route which i am using.

<Route exact path="/dashboard/data/datainfo/:_id" component={Details}/>

Can someone please guide me how can i pass a customer props in Navlink that can be accessed after it routes to new page

Thanks in advance.


Solution

  • The id you pass should be enough.

    Details component should take that id and load the "customer" from the store.