尽管使用“精确”，但React渲染多个组件

Question

I have a React app with a conflict between two routes:

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

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

The first Route, renders fine. However, due to the /:participantID wildcard in the path of the second Route - both the ParticipantRegistration and ParticipantDetailed components render - despite using the exact parameter.

How can I get React to render only the ParticipantRegistration component when the path is /app/participants/register and not render the ParticipantDetailed component underneath?

I would prefer not to have to modify the paths as the app has a few other conflicts like this and keeping track of all the different paths is difficult enough as it is.

Answer 1

You can use a Switch to render only the one route at a time.

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);

You can play with the code here