Реагировать на конечную точку маршрутизатора с параметрами

Question

Я пытаюсь определить маршрут реакции, который может содержать несколько различных вариантов.

Я пытаюсь избежать определения маршрута для каждого, как показано ниже:

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

В Express,Я могу сделать это, используя app.get('/:name(option1|option2|option3)?', (req, res) => {}, а затем получить доступ к этим данным через req.params.name

Кроме того, есть ли способ, которым я могу передать параметр пути (то есть option1), в мой компонент через реквизиты? Как бы я это сделал?

Answer 1

Вы можете сохранить array путей и map их в одном и том же Component

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

Есть ли способ, которым я могу передать параметр пути (т.е. option1)в мой компонент через реквизит?

Да, просто используйте render вместо component

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

Для url parameters используйте его так

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

А внутри Foo.js

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

Вы также можете использовать regexp

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

Answer 2

параметры установлены с /myroute:myparam, и вы можете получить его в целевом компоненте с помощью this.props.match.params.myparam