ReactJS маршрутизация неоднозначного соответствия маршрута

Question

Я посмотрел учебную документацию о маршрутизации React для неоднозначных совпадений и понял, что у вас могут быть статические маршруты, такие как / about, / contact, а затем совпадение для /: user внутри коммутатора.

Что яя борюсь с это, у меня есть необходимость иметь маршруты на одном уровне, но с использованием разных компонентов в зависимости от маршрута,

например:

/devon        - RegionComponent
/privacy      - PageComponent
/dog-friendly - SearchResultsComponent

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

Как бы вы поступили так?

Answer 1

Вы должны определить хотя бы 1-е слово динамического маршрута. Смотрите ниже код

render((
    <Route path="/" component={App}>
      <Route path="user/*" component={UserComponent}/>
      <Route path="courses/*" component={CoursesComponent}/>
    </Route>
), document.getElementById('app'))

В приведенном выше примере вы можете использовать любые динамические маршруты, которые могут начинаться с user / или курсы /

Маршрутизатор React перенаправит вас к соответствующему компоненту на основе вашего маршрута.

Answer 2

Если вы хотите иметь маршруты для точного определения местоположения, используйте

<Router>
    <Switch>
      <Route exact path="/" component={YourRootComponent} />
      <Route path="/devon" component={RegionComponent} />
      <Route path="/privacy" component={PageComponent} />
      <Route path="/dog-friendly" component={SearchResultsComponent} />
    </Switch>
</Router>

Примечание: «точный» гарантирует, что он будет соответствовать точному пути «/». В противном случае, если вы не используете «точный» для своего корня, он сначала сопоставит все маршруты с «/», отобразит ваш корневой компонент и превзойдет другие маршруты. В случае, если вы не хотите использовать «точный», другой альтернативой может быть запись корневого маршрута, т.е. '<Route path="/" component={YourRootComponent} />' в самом конце других маршрутов.

Что касается динамических маршрутов, вы всегда можете использовать ES6's template literals для добавления динамических строк в ваш маршрут.

Answer 3

установочные пакеты

npm установление реакции-роутер-dom --save

импорт этой строки

import { BrowserRouter as Router, Route, Link } from "react-router-dom";<br>

добавить этот код в randerфункция

<Router> <Route path="/about" component={About} /> <Route path="/contact " component={contact } /><br> </Router>