How to match ambiguous path and static path with React Router

Question

I am currently trying to match the following URL

https://www.example.com/discover/exampleuser/review

there are other urls that i am matching with regex as well

https://www.example.com/discover/community
https://www.example.com/discover/reviews
https://www.example.com/discover/activity

I have the following code that will match the last three urls fine

<Route path={`${url}/(community|reviews|activity)`} render={prop => (
  <div className='mb-4'>
    <CollectionWidget { ...prop } />
  </div>
)} />

Whenever I use the following path it works

{`${url}/:username`}

however when i try to match all of the urls like so it does not

{`${url}/(community|reviews|activity|:username)`}

How do i match regex with a ambiguous id

Have you tried wrapping the wildcard in as a variable? {${url}/(community|reviews|activity|${:username})} Does that help? — Josh Pittman
– Josh Pittman, Commented Feb 8, 2019 at 3:28
so is match.params.user just silently ignored in target component? if there are if ... else ... inside the component it'd be better to refactor all that into 2 separate components bound to different(parametrized and without parameters) routes. — skyboyer
– skyboyer, Commented Feb 8, 2019 at 18:21

Derek Nguyen · Accepted Answer · 2019-02-08 18:13:56Z

4

That sounds impossible to be honest, how could you match both unnamed and named parameter at the same time?

Good thing you could pass in 2 strings (or more):


<Route 
  path={[
    `${base}/(a|b|c)`, 
    `${base}/:username
  `]} 
  component={({ match }) => <div children={JSON.stringify(match.params)} />} />

// /b ---> { 0: "b" }
// /c ---> { 0: "c" }
// /d ---> { "username": "d" }

edited Feb 8, 2019 at 18:13

answered Feb 8, 2019 at 17:59

Derek Nguyen

11.5k1 gold badge44 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

How to match ambiguous path and static path with React Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related