React router v5.0.1 - 在同一路由上渲染两个组件答案

【问题标题】：React router v5.0.1 - Rendering two components on same routeReact router v5.0.1 - 在同一路由上渲染两个组件
【发布时间】：2019-12-23 14:51:36
【问题描述】：

我已经设置了两条单独的路由，但是两条路由都是为 localhost:3000 渲染的

我查看了有关同一问题的 stackoverflow 问题，但没有解决我的问题。

我已经将我的路线包裹在 switch 中，尝试改变路线的顺序，使用精确并且还强制 id 仅查找数字。

提到过—— React router v4 - Rendering two components on same route

但无法解决我的问题

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

render() {
    return (
      <Router>
        <Switch>
         <Route exact path="/" render={props => <Table stu={this.state} />} />
          <Route
            path={`/:id(\\d+)`}
            render={props => <Detail data={this.state} />}
          />
        </Switch>
      </Router>
    );
  }

Table 和 Detail 组件都为 localhost:3000 呈现，而我只想为 localhost:3000 呈现 Table 组件。

【问题讨论】：

您的代码似乎有效：codesandbox.io/embed/peaceful-dew-yu7d1
CD - 在您的代码框链接中看不到任何路由器代码
抱歉，再试一次
附带说明，我尝试了 CD 的解决方案，它也适用于我。一切都已正确设置，问题可能通过在包上运行 npm update 或在 Table 或 Detail 中来解决（也许，您的 Table 组件具有 Detail 并因此全部显示？）
Ilya Kovalyov - 是的，确实如此。在我的表格组件的渲染方法中，我将道具传递给详细信息组件，而详细信息也正在被渲染。也许我可以设置一个全局状态，而不是向下钻取道具。谢谢 ilya 和 CD

标签： reactjs react-router

【解决方案1】：

正如 Ilya kovalyov 在上面的 cmets 中指出的那样 - 在我的 Table 组件的渲染方法中，我将 props 传递给 Detail 组件，而 Detail 也被渲染了

【讨论】：