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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue运行报错：SyntaxError: Cannot use import statement outside a module

![4f7a6168858950498b69198dc2cf5b7c.png][] PS C:\Users\wangting\Desktop\assets_web_a

左手的ㄟ右手/ 2022年12月31日 14:28/ 0 赞/ 525 阅读

相关 ImageView no longer exists. You should not use this PhotoViewAttacher any more

[参考GitHub的解决方法][GitHub] 把PhotoviewAttacher 类中的cleanup()方法替代成下面的方法 @SuppressLint("N

「爱情、让人受尽委屈。」/ 2022年07月16日 08:13/ 0 赞/ 91 阅读

相关 Ubuntu安装opencv报错：You should create a separate directory for build files.

这是希望你在build之前创建一个独立的文件夹来存储build文件。你应该按照下面的方式进行cmake: cd opencv mkdir build

た入场券/ 2022年05月23日 09:06/ 0 赞/ 132 阅读

相关 maven报错JAVA_HOME should point to a JDK not a JRE

在mavem目录bin目录下打开mvn.cmd文件在文件第一行输入set JAVA\_HOME=D:\\Java\\jdk1.8.0\_101（此处为你的Jdk所在）原文：

我不是女神ヾ/ 2022年05月12日 04:30/ 0 赞/ 104 阅读

相关 Angular执行测试报错: 'router-outlet' is not a known element

本机环境： $ ng --version Angular CLI: 7.1.1 Node: 10.11.0 OS: darwin x64

Love The Way You Lie/ 2022年04月11日 13:18/ 0 赞/ 472 阅读

相关 react +antd 报错text.split is not a function

2 1，table列换行报错text.split is not a function 2，如果数组分隔处加上toString 3，代码如下 {

拼搏现实的明天。/ 2022年02月19日 01:19/ 0 赞/ 435 阅读

相关 React运行浏览器报错[A <Router> may have only one child element]

错误信息 Uncaught Invariant Violation: A <Router> may have only one child element

今天药忘吃喽~/ 2021年12月20日 12:59/ 0 赞/ 176 阅读

相关 react启动报错(react is not defined)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNl

忘是亡心i/ 2021年09月02日 09:07/ 0 赞/ 870 阅读

相关初学react - 报错You should not use withRouter(Home) outside a Router 的解决

报错： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

快来打我*/ 2021年08月27日 12:32/ 0 赞/ 658 阅读

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

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

青旅半醒/ 2021年07月24日 12:11/ 0 赞/ 275 阅读