Реагируйте на рендеринг нескольких компонентов, несмотря на использование «точного»

Question

У меня есть приложение React с конфликтом между двумя маршрутами:

<Route exact path="/app/participants/register" component={ParticipantRegistration}/>

<Route exact path="/app/participants/:participantID" component={ParticipantDetailed}/>

Первый маршрут, хорошо рендеринг. Однако из-за подстановочного знака /:participantID в пути второго маршрута - оба компонента ParticipantRegistration и ParticipantDetailed рендерится - несмотря на использование параметра exact.

Как заставить React отображать только компонент ParticipantRegistration, если путь /app/participants/register, а не компонент ParticipantDetailed внизу?

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

Answer 1

Вы можете использовать Switch для визуализации только одного маршрута за раз.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import "./styles.css";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/x/register" component={() => <p>x</p>} />
        <Route path="/x/:id" component={() => <p>y</p>} />
      </Switch>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вы можете играть с кодом здесь