Passing both match param and props into react component when using routing

react router v4 pass props to component
react get url params without router
react router pass props
react router params
react router link pass props
react router query params
react router match
react router multiple params

I have a functional react component and want to render some properties for a selected person in my component.

So I first map a simple list with links to each person

      {props.persons.map((person, i) =>{
      return(
     <li key={i}>
      <Link to={`/topics/${person.id}`}>{person.name}</Link>
     </li>
      )
    })}
  </ul>

then I make the route

<Route path={`/topics/:id`} render={() => <Topic persons={props.persons} />} />

as of now I just pass in the persons.

However I also want to be able to pass in the id, so I can find the specific person, and render information about that person. I have tried using the matching property, but that seems to prohibit me from passing in props as well.

Any tips to make a workaround?

Maybe it would be possible to just pass in the properties of the selected person?

EDIT:

Here is what i have tried so far.

   const Topic = (props) =>{
  console.log('props are ', props) //logs array of persons
  return(
    <div>
      <h2>Topic</h2>
      <p>I have been rendered</p>
    </div>
  )
}




 const Topic = ({match}) =>{
  console.log('match is ', match) //logs match parameter, but now i can't access persons
  return(
    <div>
      <h2>Topic</h2>
      <p>I have been rendered</p>
    </div>
  )
}

When you're using the render prop on a <Route> component, the render function is passed an object with the match, location, and history information.

https://reacttraining.com/react-router/web/api/Route/route-props

<Route 
  path={`/topics/:id`} 
  render={({match}) => (
    <Topic id={match.params.id} persons={props.persons} />
  )} 
/>

How To Pass Multiple Route Parameters in a React URL Path, I wanted to pass more than one route parameter in a React URL route path, Two different pieces of data, both required by a different, unrelated component upon redirect (so passing data through props like with a typical child Just by using the correct URL path params syntax ( this.props.match.params. After all, props are only used to pass data from one component to another component React, but only from parent to child components down the component tree. React Props vs. State Passing only props from component to component doesn't make the component interactive, because nothing is there to change the props.


You no need to pass id as a prop to Topic component of route so instead to get the id of path param you can do following in the component to get the id

In the Topic component

You can get the id using

  props.match.params.id

Route Params ― Scotch.io, With react-router-dom , we designate a dynamic portion of the URL to be matched So both are shown. The library passes in a prop called match into every route that is rendered. method in the UserInfo component to use our route param. So to recap, if you need to pass a prop to a component being rendered by React Router, instead of using Route s component prop, use its render prop passing it an inline function then pass along the arguments to the element you’re creating. This is part of our React Router course. Check it out if you like this post.


How to pass props to components when you use <Route , So react-router's component has components attribute. wzup changed the title How to pass params to components when you use <Route components={{}} Do not use both and do not use the component prop as this leads to and what I do is I actually spread {props.match.params} because then on  Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: navigation.navigate('RouteName', { /* params go here */ }) Read the params in your screen component: route.params. We recommend that the params you pass are JSON-serializable.


Allow passing props to <Route> to be passed down to the , <Route path={match.path + "/followers"} component={UserFollowers} /> </div> } Both of these options work, but I think it'd be more elegant to just have Feature Request: Implicitly pass props to Route component instead of Unable to use `render` prop for `Route` fusionjs/fusion-plugin-react-router#121. Render Prop The render prop provides the ability for inline rendering and passing extra props to the element. This prop expects a function that returns a React element when the current location


React Router Params, Start learning to code for free with real developer tools on Learn.co. Learn how React Router passes through params to a React Router rendered component of the URL to the component via an object called match.params as own props of the matching routes (which is why it is rendering both components right now). Recently, I came across an interesting problem I hadn’t encountered before. I wanted to pass more than one route parameter in a React URL route path, then access those parameters in a component


React Router v5: The Complete Guide, When you need to navigate through a React application with multiple views, you'​ll need a </li> </ul> </nav> /* Route components are rendered if the path prop matches the current Therefore, both the routes are matched and rendered. or props.match.params depending on how the props are passed. Now, the parameter will be received as props from the About component. The only thing we have to do now is destructure the props and get back the name property. By the way, {match:{params:{name}}} is the same as props.match.params.name. We've done a lot up to this point. But in some cases we don't want to use links to navigate between pages.