盡管使用“精確”，但React渲染多個組件

Question

我有一個React應用程序，兩條路線之間存在沖突：

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

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

第一條路線效果很好。 但是，由於第二條路徑的路徑中有/:participantID通配符，因此盡管使用了exact參數， ParticipantRegistration和ParticipantDetailed組件均會呈現。

我該如何反應僅渲染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);

您可以在此處使用代碼