React Router Pass Param to Component

Question

const rootEl   document getElementById  root     ReactDOM render       lt BrowserRouter gt           lt Switch gt               lt Route exact path     gt                   lt MasterPage   gt               lt  Route gt               lt Route exact path   details  id   gt                   lt DetailsPage   gt               lt  Route gt           lt  Switch gt       lt  BrowserRouter gt       rootEl      I am trying access the id in the DetailsPage component but it is not being accessible  I tried    lt DetailsPage foo  this props   gt    to pass parameters to the DetailsPage  but in vain    export default class DetailsPage extends Component       constructor props            super props              render             return                lt div className  page  gt               lt Header   gt               lt div id  mainContentContainer   gt                lt  div gt               lt  div gt                   So any idea how to pass the ID on to the DetailsPage

User · Answer

Use render method    lt Route exact path   details  id  render   props   gt        lt DetailsPage id  props match params id   gt       gt    And you should be able to access the id using   this props id   Inside the DetailsPage component

User · Answer

if you are using class component  you are most likely to use GSerjo suggestion  Pass in the params via  lt Route gt  props to your target component   exact path   problem  problemId  render  props   gt   lt ProblemPage     props match params    gt

User · Answer

Here s typescript version  works on  quot react-router-dom quot    quot  4 3 1 quot  export const AppRouter  React StatelessComponent        gt        return            lt BrowserRouter gt               lt Switch gt                   lt Route exact path  quot  problem  problemId quot  render  props   gt   lt ProblemPage     props match params    gt     gt                   lt Route path  quot   quot  exact component  App    gt               lt  Switch gt           lt  BrowserRouter gt             and component export class ProblemPage extends React Component lt ProblemRouteTokens gt         public render    JSX Element           return  lt div gt  this props problemId  lt  div gt            where ProblemRouteTokens  export interface ProblemRouteTokens   problemId  string

User · Answer

I used this to access the ID in my component    lt Route path   details  id  component  DetailsPage   gt    And in the detail component   export default class DetailsPage extends Component     render         return         lt div gt           lt h2 gt  this props match params id  lt  h2 gt         lt  div gt                This will render any ID inside an h2  hope that helps someone

User · Answer

If you want to pass props to a component inside a route  the simplest way is by utilizing the render  like this    lt Route exact path   details  id  render   props    gt   lt DetailsPage globalStore  globalStore      props    gt      gt    You can access the props inside the DetailPage using   this props match this props globalStore   The     props  is needed to pass the original Route s props  otherwise you will only get this props globalStore inside the DetailPage

User · Answer

Use the component    lt Route exact path   details  id  component  DetailsPage    gt    And you should be able to access the id using   this props match params id   Inside the DetailsPage component

User · Answer

try this    lt Route exact path   details  id  render   props   gt  return       lt DetailsPage id  props match params id   gt        gt    In details page try this     this props id

User · Answer

In addition to Alexander Lunas answer     If you want to add more than one argument just use    lt Route path   details  id  title  component  DetailsPage   gt   export default class DetailsPage extends Component     render         return         lt div gt           lt h2 gt  this props match params id  lt  h2 gt           lt h3 gt  this props match params title  lt  h3 gt         lt  div gt

User · Answer

Since react-router v5 1 with hooks   import    useParams   from  react-router    export default function DetailsPage       const   id     useParams        See https   reacttraining com blog react-router-v5-1

User · Answer

Another solution is to use a state and lifecycle hooks in the routed component and a search statement in the to property of the  lt Link   gt  component  The search parameters can later be accessed via new URLSearchParams      lt Link    key  id     to        pathname  this props match url         foo      search    foo     foo        gt    lt Route path   details  foo  component  DetailsPage   gt   export default class DetailsPage extends Component        state             foo                componentDidMount              this parseQueryParams               componentDidUpdate             this parseQueryParams               parseQueryParams              const query   new URLSearchParams this props location search           for  let param of query entries                  if  this state foo    param 1                     this setState  foo  param 1                                          render             return             lt div gt               lt h2 gt  this state foo  lt  h2 gt             lt  div gt

[reactjs] React Router Pass Param to Component

Examples related to reactjs

Examples related to react-router