Как визуализировать компоненты со строками запроса React-Router

Question

CodeSandbox - codesandbox

Я пытаюсь визуализировать компоненты с react-router, но я не понимаю, как правильно работать со строками запроса.Итак, условие - если ?tbm=first ⟹, будет отображаться первый компонент и так далее.Как это сделать?

Пример:

Answer 1

Другая строка запроса не формирует другой путь.В вашем примере путь всегда один и тот же, то есть /search, поэтому маршрутизация не может различать ваши компоненты.

Если вы измените свой код, чтобы иметь три фактических пути (/first, /second и /third) и измените ссылки соответствующим образом, тогда ваш код работает как задумано, см.

Если вы хотите включить строку запроса, вы должны придерживаться одного маршрута с путем /search и отобразить объект компонента на основе проанализированной строки запроса, см.

Answer 2

Строка запроса будет доступна внутри this.props.location.search внутри вашего отрендеренного компонента.Итак, идея в том, что вам нужно иметь родительский компонент, который будет отображаться примерно так:

<Route path="/" component={parentComponent} />

Теперь все, что вы введете в виде строки запроса, будет доступно, и вы увидите, что если вы откроете свой инструмент реагировать на разработку,И как только вы получите эту строку, просто проанализируйте ее и получите динамические маршруты, основанные на ваших пользовательских условиях.проверить изображение для вашей справки.