React Router Dom hangs browser

Question

I am trying to follow along a course and when I installed react-router-dom and ran npm start, my browser breaks

This is my package.json:

"dependencies": {
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.5"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

In my index.js:

 import React from 'react';
 import App from './components/App'; 
 import 'bootstrap/dist/css/bootstrap.css';      
 import './global.css';
 const container = document.getElementById('app');
 ReactDOM.render(<App/>, container);

And in my App.js:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import BadgeNew from '../pages/BadgeNew';
import Badges from '../pages/Badges';

function App(){
    return (<BrowserRouter>
        <Switch>
            <Route exact path="/" component={Badges}/>
            <Route exact path="/badges/new" component={BadgeNew}/>
        </Switch>
    </BrowserRouter>)
}

export default App;

Am I doing something wrong?

Answer 1

I experienced the same problem.

Quick Troubleshoot -

1. Make sure that the Badges and BadgeNew components do not have a duplicate of the Switch Route definition or any for that matter.
2. Keep all your Route definition in the App js file
3. Wrap the the with the BrowserRouter in the index.js file. take it out of the App.js