React Router V4 allow only certain parameters in URL

Question

I'm using the React Router V4 and I've this router's configuration:

  <Router history={customHistory}>
    <Switch>
      <Route exact path={`/:lng?`} component={Page} />
      <Route path={`/:lng?/firstUrl`} component={Page}/>
      <Route path={`/:lng?/secondUrl`} component={Page}/>
      <Route component={NoMatch} />
    </Switch>
  </Router>

The lng is optional language parameter which should match pattern like a en, de or absent. For instance app utilizes these routes:

www.website.com/en
www.website.com/en/
www.website.com/  - will load default lang
www.website.com  - will load default lang
www.website.com/de
www.website.com/de/

Also I've additional component inside which I define routes for functions:

  <ModalRoute component={SomeURL} path={`/:lng?/SomeURL`} parentPath={`/${lang}/`} />
  <ModalRoute component={SomeURL2} path={`/:lng?/SomeURL2`} parentPath={`/${lang}/`} />

So as the result I would like to achieve that only allowed language codes (and empty param) would be accepted and which don't - would be redirected to NoMatch component.

Is it possible? How it could be achieved?
Example much appreciated

Route pattern matching is in on-going development: github.com/ReactTraining/react-router/pull/3105 — billjamesdev
– billjamesdev, Commented Nov 18, 2017 at 17:53
One and half year passed since last discussion... haven't understood is this feature currently in progress or forgotten — Kuzma
– Kuzma, Commented Nov 18, 2017 at 18:13

U Rogel · Accepted Answer · 2017-11-20 14:51:07Z

22

You can use regex in your path.

For a required parameter with specified options:

<Route path="/about/:lang(en|de)/" exact component={About}/>

For an optional paramater:

<Route path="/about/:lang?/" exact component={About}/>

For an optional parameter with specified options

<Route path="/about/:lang(en|de)?/" exact component={About}/>

For further reading

edited Nov 20, 2017 at 14:51

answered Nov 18, 2017 at 21:23

U Rogel

1,95117 silver badges31 bronze badges

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

7 Comments

Kuzma Over a year ago

I've made this in such way: <Route exact path={/:lng?(en|de)} component={Page} /> <Route path={/:lng?(en|de)/someURL1} component={Page}/> But I have two issues: the plain address is not accepted: www.website.com(/) and lang paramter somehow stopped detecting this.props.match.params.lng. Now it's undefined

U Rogel Over a year ago

I can get this.props.match.params, can you post only the <Route/> code?

Kuzma Over a year ago

The index.js:` <Router history={customHistory}> <Switch> <Route exact path={/:lng?(en|de)} component={Page} /> <Route path={/:lng?(en|de)/url1} component={Page}/> <Route path={/:lng?(en|de)/url2} component={Page}/> <Route path={/:lng?(en|de)/url3} component={Page}/> <Route component={NoMatch} /> </Switch> </Router> ` and in Page.js the this.props.match.params.lng is undefined while without regex expression it extracts the lang param from URL

U Rogel Over a year ago

write it like this /about/:lng(en|de)?

U Rogel Over a year ago

Glad I could help :)

|

Collectives™ on Stack Overflow

React Router V4 allow only certain parameters in URL

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related