React-Router 4 default route content displays on all other components [duplicate]

First thing you need to make use of <Switch> and wrap it around your <Routes>

As described in Here

<Switch> is unique in that it renders a route exclusively. In contrast, every that matches the location renders inclusively.

Firstly to make sure import Switch in your file like this:

import { Switch, Route } from 'react-router' <Switch> <Route exact={true} path="/" component={App}></Route> <Route path="/One" component={One}></Route> <Route path="/Two" component={Two}></Route> <Route path="/Three" component={Three}></Route> <Route path="*" component={FourOFour}></Route> <Switch> 

So your code should be like :

import React from 'react'; import ReactDOM from 'react-dom'; import { Switch, Route } from 'react-router'; // Note this extra line import './index.css'; import App from './App'; import One from './one'; import Two from './two'; import Three from './three'; import FourOFour from './404'; import registerServiceWorker from './registerServiceWorker'; import {BrowserRouter, Route} from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <Switch> // Note this extra Line <Route exact={true} path="/" component={App}></Route> <Route path="/One" component={One}></Route> <Route path="/Two" component={Two}></Route> <Route path="/Three" component={Three}></Route> <Route path="*" component={FourOFour}></Route> <Switch> </BrowserRouter>, document.getElementById('root') ); registerServiceWorker(); 

You can read more about <Switch > Here

You need to wrap your Routes in a Switch. A Switch will match the first Route and return it. If you don't use a switch, like you've done here, it will render out each route that matches the current path.

Change it to:

<BrowserRouter> <Switch> <Route exact={true} path="/" component={App}></Route> <Route path="/One" component={One}></Route> <Route path="/Two" component={Two}></Route> <Route path="/Three" component={Three}></Route> <Route path="*" component={FourOFour}></Route> </Switch> </BrowserRouter> 

The problem arises because all the Routes components that match the location will render. In order to render a single route (first match) you need to wrap your routes in a Switch component.

import { BrowserRouter, Route, Switch } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <Switch> <Route exact={true} path="/" component={App} /> <Route path="/One" component={One} /> <Route path="/Two" component={Two} /> <Route path="/Three" component={Three} /> <Route component={FourOFour} /> </Switch> </BrowserRouter>, document.getElementById('app') ); 

<Route> responsibility is to render some UI when a location matches the route's path.

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.

Read more about React-Router's Switch