React router v5.0.1 - Rendering two components on same route

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.

Your code seems to work: codesandbox.io/embed/peaceful-dew-yu7d1 — CD..
As a side note, I tried CD's solution and it works on my end as well. Everything is set up correctly and the problem might be solved by running npm update on the packages or it's inside Table or Detail (maybe, your Table component has Detail and thus it's all displayed?) — kovalyovi
Ilya Kovalyov - Yes true that . In the render method of my table component I am passing props to the Detail component and in turn Detail too was being rendered .Maybe rather than drilling props down I could set up a global state . Thanks ilya and CD — Vishwanath

Vishwanath Vishwanath · Accepted Answer · 2019-08-17T19:07:46

As Ilya kovalyov has pointed above in comments - In the render method of my Table component I was passing props to the Detail component and in turn Detail too was being rendered

React router v5.0.1 - Rendering two components on same route

1 Answers