Reactjs 反应路由器Dom挂起浏览器

我正试图遵循一个过程，当我安装

react router dom

并运行

npm start

时，我的浏览器坏了

这是我的

包.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"
  ]
}

在我的

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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}
从“../pages/BadgeNew”导入BadgeNew；
从“../pages/Badges”导入徽章；
函数App（）{
返回(
)
}
导出默认应用程序；

---

我做错什么了吗？

我也遇到了同样的问题

快速故障排除-

确保徽章和徽章新组件没有交换机路由定义的副本或任何相关内容

将所有路线定义保留在App js文件中

将浏览器路由器包装在index.js文件中。将其从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;