Совпадение 2 разных маршрутов с разными параметрами в React Router v4

Question

У меня есть компонент, который я хотел бы сопоставить с двумя путями: / и /:value.Мой маршрут выглядит следующим образом:

<Route path="/(|:value)" render={(props) => { return <MyComponent/>}}

Этот маршрут соответствует /, но НЕ будет соответствовать /:value.Если я жестко закодирую маршрут к:

<Route path="/(|mypath)" render={(props) => { return <MyComponent/>}}

, он будет совпадать с / и /mypath.Как я могу получить свой маршрут, чтобы соответствовать ОБА / и /any-value-i-put-here?

Answer 1

Вам просто нужно указать маршрут с условным параметром, таким как

<Route path="/:value?" render={(props) => { return <MyComponent {...props}/>}}

, и он будет соответствовать / и /any-value.После этого вы можете получить доступ к параметру, если он существует, например, this.props.match.params.value

PS Также, когда вы используете рендер, убедитесь, что вы передаете реквизиты отрендеренному компоненту