javascript - Exclude a value for a path parameter in React Router by type - Stack Overflow

admin管理员组

文章数量:1296401

I'm a bit stuck with the route component. Imagine I have this two Routes with their own path:

<Route path='/person/add' exact component={PersonForm}/>
<Route path='/person/:id' exact component={PersonView}/>

/person/add should show a form where I can create a new Person
/person/:id should show a person with the given id.

The problem >> If I navigate to /person/add it will also show the component of /person/:id because the string "add" is valid for ":id".

Is there a way I can avoid this? For example by telling that :id should be a number?

I'm a bit stuck with the route component. Imagine I have this two Routes with their own path:

<Route path='/person/add' exact component={PersonForm}/>
<Route path='/person/:id' exact component={PersonView}/>

/person/add should show a form where I can create a new Person
/person/:id should show a person with the given id.

The problem >> If I navigate to /person/add it will also show the component of /person/:id because the string "add" is valid for ":id".

Is there a way I can avoid this? For example by telling that :id should be a number?

• javascript
• reactjs
• react-router
• coercion

Share Improve this question Follow edited Dec 7, 2017 at 23:06 Aluan Haddad 31.8k1010 gold badges8282 silver badges9393 bronze badges asked Dec 7, 2017 at 22:49 WannesWannes 1,06922 gold badges1111 silver badges2121 bronze badges 4

• 1 /person/add should just be /person then the state where there is no parameter is the add state and you can reuse it for editing. It makes sense :p – Aluan Haddad Commented Dec 7, 2017 at 22:54
• You may find this of interest stackoverflow.com/a/35604855/1915893 – Aluan Haddad Commented Dec 7, 2017 at 22:57
• 1 @AluanHaddad That's indeed how I solved it, but still I was questioning if there is another solution for it. Thanks! – Wannes Commented Dec 7, 2017 at 23:02
• I see. I'm sure there is a way but determining what strings are valid numbers in JavaScript is a source of much consternation. – Aluan Haddad Commented Dec 7, 2017 at 23:05

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 28

Found a possible solution: You can use Switch around the routes. Then it will only match on the first one that matches.

<Switch>
  <Route path='/person/add' exact component={PersonForm}/>
  <Route path='/person/:id' exact component={PersonView}/>
</Switch>

The problem I was having is that I had several routes;

/locations/:locationId
/locations/new

But when using the matchPath function from react-router it would return a false-positive for /locations/:locationId when I was on /locations/new. I solved this by passing a custom regex to my identifier;

/locations/:locationId([a-z0-9-]{36})

This will check if my "locationId" is a uuid and otherwise it won't match. It's probably also possible to exclude words like "new/edit/add"

These sources helped me;

• https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#custom-match-parameters
• https://regex101.com/

本文标签： javascriptExclude a value for a path parameter in React Router by typeStack Overflow