Pass url param to React.js root component

Question

I need to customize the style of my React.js app based on which client is using it, and I'm trying to pass the client id in the url. The url looks like this:

/#/app/client/dashboard

I created the Rout using this param:

<Route path="/app/:client/dashboard" component={Dashboard} />

Great. Now I want to retrieve the param in my root component. I tried two things. The first is to see if it's in the props object:

export default function App(props)

but it's not there.

Then I tried to set the localStorage with a client item in the Dashboard component, but that's too late because the App() function is called before the Dashboard() function.

Is there any other way to do this?

There isn't a params match in props of Dashboard component? — Irrech
– Irrech, Commented Apr 14, 2020 at 7:33
if I get it straight you get the clientId in Dashboard component but you want to use it in the parent component? you want the parent component to also be able to read the query param — naortor
– naortor, Commented Apr 14, 2020 at 7:35
It can only be passed to a child component of the rendering Route. Where is App component in relation to Dashboard? — Drew Reese
– Drew Reese, Commented Apr 14, 2020 at 8:13

Guhan S · Accepted Answer · 2020-04-14 07:53:46Z

1

I'm not sure whether this is a right approach. If just the problem needs to be solved, give a try with window.location, as it will give access to the current url

let url = window.location.pathname;
console.log(url);

answered Apr 14, 2020 at 7:53

Guhan S

1663 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yunus Temurlenk Over a year ago

This is not an answer but a comment please visit and check how to answer a question.

Eddy Over a year ago

Thanks, the pathname is empty, but window.location.href has the information.

Collectives™ on Stack Overflow

Pass url param to React.js root component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related