Question

我有一个React应用，两条路线之间存在冲突：

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

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

第一条路线呈现良好。但是，由于第二条路径路径中的/:participantID通配符，尽管使用了ParticipantRegistration参数，但ParticipantDetailed和exact组件都呈现了。

当路径为ParticipantRegistration时，如何让React只渲染/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);

您可以使用代码here

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

1 个答案: