React Router v5.0.1-在同一路径上渲染两个组件

Question

I have set two separate routes , but both the routes are being rendered for localhost:3000

I have looked at stackoverflow questions regarding the same issue but not resolving my issue .

I have wrapped my routes in switch , tried alternating the order of routes , used exact and have also forced id to look for only numeric .

Have referred to - React router v4 - Rendering two components on same route

but not able to resolve my issue

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

Both Table and Detail components are being rendered for localhost:3000 whereas I want only Table component to be rendered for localhost:3000.

Answer 1

正如Ilya kovalyov在上面的评论中指出的那样-在我的Table组件的render方法中，我将道具传递给Detail组件，而Detail也在被渲染