How to render component if URL has specific query parameter in React?

Question

I have some paths that currently look like this:

const baseUrl = `${mainUrl}/web`;

<Route exact path={baseUrl} component={Goods} />
<Route exact path={`${baseUrl}/:ID`} component={Good} />
<Route exact path={`${baseUrl}/:ID/details`} component={GoodDetails} />

Now, this works all fine, but what I instead want to do is that I want to render Good component, only if the URL matches this ${this.baseUrl}/:ID condition that we have, or if there is a query parameter called br=. I tried to do something like this:

<Route exact path={`${baseUrl}/:ID` | `${mainUrl}?br=:brInfo`} component={Good} />

But, this doesn't seem to work. Any ideas what is the proper way to this with React Router?

herodrigues · Accepted Answer · 2019-02-18 20:28:33Z

1

You can define two different routes to render the same component.

<Route exact path={`${baseUrl}/:ID`} component={Good} />
<Route exact path={`${mainUrl}?br=:brInfo`} component={Good} />

answered Feb 18, 2019 at 20:28

herodrigues

9671 gold badge7 silver badges12 bronze badges

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

1 Comment

user9128740 Over a year ago

This doesn't seem to match it.

Collectives™ on Stack Overflow

How to render component if URL has specific query parameter in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related