React Router Endpoint with Options

Question

I am trying to define a react route that can contain multiple different options.

I am trying to avoid defining a route for each, like below:

<Route  path='/option1' component={Testing}/>
<Route  path='/option2' component={Testing}/>
<Route  path='/option3' component={Testing}/>

In Express, I am able to do this using app.get('/:name(option1|option2|option3)?', (req, res) => {} and then access this data via req.params.name

Also, is there a way that i can pass the path parameter (i.e option1), into my component via props? How would i do this?

Possible duplicate of [Multiple path names for a same component in React Router](https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router) — Raicuparta, Oct 01 '19 at 14:18

Dupocas · Answer 1 · 2019-10-01T14:39:21.100

You could store an array of paths and map them to the same Component

['/path','/foo','bar'].map(path => <Route key={path} path={path} component={Foo} />)

Is there a way that i can pass the path parameter (i.e option1), into my component via props?

Yes, just use render instead of component

<Route path='/' render={() => <MyComp myProp='foo'/>}

For url parameters use it like this

<Route path='/path/:param' component={Foo} />

And inside Foo.js

console.log(props.match.params.param)

You could also use regexp

<Route exact path="/path/:foo([0-9a-fA-f]{40})" component={Foo} />

score 0 · Answer 2 · answered Oct 01 '19 at 14:22

0

paramenters are set with /myroute:myparam and you can retrieve it in target component with this.props.match.params.myparam

answered Oct 01 '19 at 14:22

Mosè Raguzzini

2 Answers2