react 报错You should not use xx outside a 「Router」-蒲公英云

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

青旅半醒 2021-07-24 12:11 475阅读 0赞

不能将使用了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