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

青旅半醒 2021-07-24 12:11 315阅读 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