时间戳

首页 > 解决方案 > 反应渲染多个组件，尽管使用“精确”

node.js - 反应渲染多个组件，尽管使用“精确”

问题描述

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

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

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

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

ParticipantRegistration当路径是/app/participants/register而不渲染组件时，如何让 React 仅渲染ParticipantDetailed组件？

我宁愿不必修改路径，因为该应用程序还有一些其他类似的冲突，并且跟踪所有不同的路径已经很困难了。

标签： node.jsreactjsreact-router

解决方案

您可以使用 a 一次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);

你可以在这里玩代码

推荐阅读