react 报错You should not use xx outside a 「Router」

不能将使用了react-router-dom的组件暴露在BrowserRouter之外 解决:将组件放在BrowserRouter内

代码示例:

import React,{Component} from 'react' import Header from './common/header' import {CreateGlobalStyle} from './style.js'; import {Icon} from './statics/iconfont/iconfont' import {BrowserRouter,Switch,Route} from 'react-router-dom' import Home from './page/Home/home' import Detail from './page/Detail/detail' import Login from './page/Login/login' class App extends Component{ render() { return( <div> <CreateGlobalStyle/> <Icon /> <BrowserRouter> <div> //解决方案 <Header></Header> <Switch> <Route path='/' exact render={(props)=>{return <Home {...props} />}} ></Route> <Route path='/login' render={(props)=>{return <Login {...props} />}} ></Route> <Route path='/detail/:id' render={(props)=>{return <Detail {...props} />}} ></Route> </Switch> </div> </BrowserRouter> </div> ) } } export default App