Как я могу исправить проблему, когда добавление нового пути React Router вызывает неожиданные проблемы

Question

В следующем коде у меня есть закомментированная строка.Все работает так же хорошо, как и сейчас, однако, когда я раскомментирую строку, я получаю странное поведение.Кажется, что цель пути внезапно отображает две копии, и любые ссылки html на путь посещения больше не работают с целевой страницы.Я попытался изменить порядок путей, но это, кажется, не имеет никакого значения.Я также использую приставку, и, возможно, проблема в этом, но я просто учусь при помощи притока, поэтому я не уверен, с чего начать.

  const App = () => (
  <main>
    <div id="App">
      <SideNav pageWrapId={"page-wrap"} outerContainerId={"App"} />
      <div id="page-wrap">
        <Route path="/visit/:location" component={Location} />
        {/* <Route path="/:location" component={Location} /> */}
        <Route exact path="/" component={Home} />
        <Route exact path="/visit" component={Visit} />
        <Route exact path="/give" component={Give} />
        <Route exact path="/contact" component={Contact} />
        <Route exact path="/media" component={Media} />
        <Route exact path="/connect" component={Connect} />
        <Footer />
      </div>
    </div>
  </main>
);

Если бы кто-то мог указать мне хотя бы наНаправление, чтобы посмотреть, я был бы очень признателен.

Answer 1

Когда ваш <Route path="/:location"> находится наверху, тогда все ваши маршруты ниже этой линии будут соответствовать этому маршруту.Так, на странице /visit, visit будет параметром маршрута, на странице /give give будет параметром маршрута и так далее.И все ваши компоненты будут отображаться в связи с этим.Я предлагаю вам переместить <Route path="/:location"> маршрут в конец или изменить название маршрута.Вы также не используете <Switch>.Оберните ваши маршруты вокруг <Switch> компонента.

Answer 2

В следующем случае второй маршрут будет отображаться в каждом случае, :location - это подстановочный знак, он соответствует каждому вводимому вами маршруту, так как если вы не заключите в элемент <Switch> весь соответствующий маршрут, будет отображаться,

Подробнее о переключателе можно узнать по ссылке

<Route path="/visit/:location" component={Location} />
<Route path="/:location" component={Location} />

Рекомендуемое изменение

const App = () => (
  <main>
    <div id="App">
      <SideNav pageWrapId={"page-wrap"} outerContainerId={"App"} />
      <div id="page-wrap">
        <Switch>
          <Route path="/visit/:location" component={Location} />
          <Route path="/visit" component={Visit} />
          <Route path="/give" component={Give} />
          <Route path="/contact" component={Contact} />
          <Route path="/media" component={Media} />
          <Route path="/connect" component={Connect} />
          <Route path="/:location" component={Location} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    </div>
  </main>
);