Menu
I want to do a fetch using the onEnter callback, but I don't know how to read a URL param in the Route component. I have this Route
<Route path="book/:bookId" component={BookContainer} onEnter={onBookLoad()}/>
I want to use the bookId from path as function parameter for onBookLoad(). Is it possible?
706
Using React Router, when you want to create a Route that uses a URL parameter, you do so by including a : in front of the value you pass to Route 's path prop. Finally, to access the value of the URL parameter from inside of the component that is rendered by React Router, you can use React Router's useParams Hook.
Using Link So when we click on the Register link, it will redirect to the /register route. But Link also allows us to pass additional data while redirecting. Here, at the place of data_you_need_to_pass , we can pass a string or object , array and so on and in the /register route we will get that data in props.
Nevermind, it was trivial.
<Route path="book/:bookId" component={BookContainer} onEnter={onBookLoad}/>
export function onBookLoad(nextState) {
console.log(nextState.params.bookId);
//do stuff with the param
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With