React Routing with URL Link as params

Question

How can i set route like this.

<Route path='/:id/:url' component={Url}/>

and then in Url component access the value of this url like.

const url = this.props.params.match.url

so if i pass in http://localhost:3000/245/http://www.msn.com

i would be able to get this url value through props.params.

Answer 1

You can encode your URL to remove the slashes and other URL specific symbols using encodeURIComponent

So for your case, it'll be const urlEncoded = encodeURIComponent(http://www.msn.com) then passing this value to your URL should result to http://localhost:3000/245/http%3A%2F%2Fwww.msn.com which you can access using this.props.params.match.url