使用withRouter報錯的問題原因及解決辦法

原因是因為你沒有把你的router放在最外面，withrouter不可以放在router的外面。

比如【下方是錯誤的】：

在下面的**中如果你在basiclayout元件中使用withrouter就會報錯：

you should not use outside a

import react from

'react'
;import
from
'react-router-dom'
;import reactdom from
'react-dom'
;import basiclayout from
'./components/common/basiclayout'
;import list from
'./components/list/list'
;import detail from
'./components/detail/detail'
;import notfound from
'./components/notfound/notfound'
;import
'./index.css'
;const=(
)=>
/>
"/currency/:id" component=
/>
/>
<
/switch>
<
/router>
<
/basiclayout>);
}reactdom.
render
(>
, document.
getelementbyid
('root'))
;

正確的寫法：

import react from

'react'
;import
from
'react-router-dom'
;import reactdom from
'react-dom'
;import header from
'./components/common/header'
;import list from
'./components/list/list'
;import detail from
'./components/detail/detail'
;import notfound from
'./components/notfound/notfound'
;import
'./index.css'
;const=(
)=>
/>
"/currency/:id" component=
/>
/>
<
/switch>
<
/basiclayout>
<
/router>);
}reactdom.
render
(>
, document.
getelementbyid
('root'))
;

import react from

'react'
;import
from
'react-router-dom'
;function
basiclayout
(props)
)// history,location等等withrouter附加的props就能看到了
return
(***xx
<
/div>);
}export
default
withrouter
(basiclayout)
;

react之withRouter的作用

withrouter的作用 把不是通過路由切換過來的元件,將react router的history location和match三個物件傳入到props物件上 預設情況下必須是經過路由匹配渲染的元件才存在this.props，才擁有路由引數，才能使用程式設計式導航的寫法，執行this.props....

高階元件 withRouter的原理和用法

作用 高階元件中的withrouter,作用是將乙個元件包裹進route裡面,然後react router的三個物件history,location,match就會被放進這個元件的props屬性中.把不是通過路由切換過來的元件中，將react router 的 history location ma...

使用gulp load plugins報錯的解決

最近在使用gulp load plugins的時候出現了乙個錯誤。主要配置如下 const gulp require gulp const gulploadplugins require gulp load plugins load all gulp plugins const plugins gu...