Как установить необязательный параметр для корневого маршрута в react-router v4?

Скажем, у меня есть следующие 2 маршрута:

    ...
    <Route exact path="/:param1?/" component={Home}/>
    <Route path="/news" component={News}/>
    ...

теперь, когда я пытаюсь нажать маршрут /news, запускается корневой маршрут для Home с параметром param1...

Я предполагаю, что решение будет состоять в том, чтобы установить вопросительный знак перед параметром1, подобным этому /?param1, чтобы его можно было удерживать отдельно от маршрутов, но я не могу понять, как это сделать в react-router v4


react-router react-router-v4
person henk    schedule 16.03.2017    source источник
comment
Возможный дубликат React Router с необязательным параметром пути   -  person Chris    schedule 16.03.2017
comment
абсолютно нет, я знаю, как установить необязательный параметр (это вопрос в вашей ссылке)! Мой вопрос больше о том, как отличить параметр от другого маршрута... см. ответ ниже...   -  person henk    schedule 17.03.2017
comment
Ладно... просто пытаюсь помочь :)   -  person Chris    schedule 17.03.2017

Ответы (1)


arrow_upward
13
arrow_downward

В официальных документах есть пример того, как это сделать. Вы можете найти это здесь.

Вам нужно будет использовать компонент Switch с маршрутом /news на первом месте.

<Switch>
    <Route path="/news" component={News}/>
    <Route exact path="/:param1?/" component={Home}/>
</Switch>

Switch всегда будет отображать только один маршрут. Таким образом, в приведенном выше случае, если /news не станет активным, то /:param1 станет активным.

person Tyler McGinnis    schedule 16.03.2017
comment
Эй, чувак, не могли бы вы помочь мне, как создать маршрутизатор для домашней страницы с необязательным путем (например, языком). Я пытаюсь сделать что-то вроде этого: <Switch> <Route exact path="/:language?" component={FirstPage} /> <Route exact path="/:language?/add" component={AddPage} /> </Switch>, но в этом случае второй маршрут работает неправильно без языковых параметров. - person Kholiavko; 17.12.2017