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