Multiple params with React Router
<Route path="/:category/:id" exact component={ItemDetails} />
In the component, using useParams
from react-router-dom
,
import { useParams } from 'react-router-dom'
export default function ItemDetails(props) {
const {id, category} = useParams();
return (
<div className="">
{id}
{category}
</div>
)
Here is the solution, without props
and using routing library.
As @alexander-t mentioned:
path="/user/manage/:id/:type"
If you want to keep them optional:
path="/user/manage(/:id)(/:type)"
React Router v4
React Router v4 is different than v1-v3, and optional path parameters aren't explicitly defined in the documentation.
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 (?).
So, to define optional parameters, you can do:
path="/user/manage/:pathParam1?/:pathParam2?"
i.e.
<Route path="/user/manage/:pathParam1?/:pathParam2?" component={MyPage} />
Whereas, The mandatory Parameters are still same in V4:
path="/user/manage/:id/:type"
To access PathParam's value, you can do :
this.props.match.params.pathParam1