React Router with optional path parameter

Question

I want to declare a path with an optional path parameter  hence when I add it the page to do something extra  e g  fill some data       http   localhost app path to page  lt   render the page   http   localhost app path to page pathParam  lt   render the page with   some data according to the pathParam   In my react router I have the following paths  in order to support the two options  this is a simplified example     lt Router history  history  gt          lt Route path   path  component  IndexPage  gt         lt Route path  to page  component  MyPage   gt         lt Route path  to page  pathParam  component  MyPage   gt      lt  Route gt       lt  Router gt    My question is  can we declare it in one route  If I add only the second row then the route without the parameter is not found   EDIT 1   The solution mentioned here about the following syntax did not work for me  is it a proper one  Does it exist in the documentation    lt Route path   product  productName   urlID   handler  SomeHandler    gt    My react-router version is  1 0 3

User · Answer

for react-router V5 and above use below syntax for multiple paths   lt Route           exact           path   path1  path2             component  component            gt

User · Answer

The edit you posted was valid for an older version of React-router  v0 13  and doesn t work anymore   React Router v1  v2 and v3 Since version 1 0 0 you define optional parameters with   lt Route path  quot to page   pathParam  quot  component  MyPage    gt   and for multiple optional parameters   lt Route path  quot to page   pathParam1    pathParam2  quot  component  MyPage    gt   You use parenthesis      to wrap the optional parts of route  including the leading slash      Check out the Route Matching Guide page of the official documentation  Note  The  paramName parameter matches a URL segment up to the next       or    For more about paths and params specifically  read more here   React Router v4 and above React Router v4 is fundamentally different than v1-v3  and optional path parameters aren t explicitly defined in the official documentation either  Instead  you are instructed to define a path parameter that path-to-regexp understands  This allows for much greater flexibility in defining your paths  such as repeating patterns  wildcards  etc  So to define a parameter as optional you add a trailing question-mark      As such  to define an optional parameter  you do   lt Route path  quot  to page  pathParam  quot  component  MyPage    gt   and for multiple optional parameters   lt Route path  quot  to page  pathParam1   pathParam2  quot  component  MyPage    gt   Note  React Router v4 is incompatible with react-router-relay  read more here   Use version v3 or earlier  v2 recommended  instead

User · Answer

Working syntax for multiple optional params    lt Route path   section  page    page   sort    sort   component  Section    gt    Now  url can be     section  section page 1  section page 1 sort asc

User · Answer

For any React Router v4 users arriving here following a search  optional parameters in a  lt Route gt  are denoted with a   suffix  Here s the relevant documentation  https   reacttraining com react-router web api Route path-string  path  string Any valid URL path that path-to-regexp understands        lt Route path  quot  users  id quot  component  User   gt   https   www npmjs com package path-to-regexp optional  Optional  Parameters can be suffixed with a question mark     to make the parameter optional  This will also make the prefix optional  Simple example of a paginated section of a site that can be accessed with or without a page number       lt Route path  quot  section  page  quot  component  Section    gt

User · Answer

If you are looking to do an exact match  use the following syntax   param    Eg   lt Route path   my  exact   path   component  MyComponent    gt   The nice thing about this is that you ll have props match to play with  and you don t need to worry about checking the value of the optional parameter    props    match     quot 0 quot    quot exact quot

User · Answer

As with regular parameters  declaring an optional parameter is just a matter of the path property of a Route  any parameter that ends with a question mark will be treated as optional   lt Route path  quot to page  pathParam  quot  component  MyPage   gt

[javascript] React Router with optional path parameter

Examples related to javascript

Examples related to reactjs

Examples related to react-router

Examples related to react-router-v4