作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建 reactjs 组件并在另一个 tsx 文件中使用,但出现以下错误
不变式失败:您不应该在 之外使用
我的代码如下,我的代码和框https://codesandbox.io/s/zen-sound-ztbjl
class Sidebar extends Component<ISidebarProps & RouteComponentProps<{}>> {
constructor(props: ISidebarProps & RouteComponentProps<{}>) {
super(props)
this.state = {}
}
componentDidMount = (): void => {
this.initMenu()
}
componentDidUpdate = (prevProps: any): void => {
if (this.props.type !== prevProps.type) {
this.initMenu()
}
}
initMenu = (): void => {
const mm = new MetisMenu('#side-menu')
let matchingMenuItem = null
const ul = document.getElementById('side-menu')
const items = ul.getElementsByTagName('a')
for (let i = 0; i < items.length; ++i) {
if (this.props.location.pathname === items[i].pathname) {
matchingMenuItem = items[i]
break
}
}
if (matchingMenuItem) {
this.activateParentDropdown(matchingMenuItem)
}
}
activateParentDropdown = (item: any) => {
item.classList.add('active')
const parent = item.parentElement
if (parent) {
parent.classList.add('mm-active')
const parent2 = parent.parentElement
if (parent2) {
parent2.classList.add('mm-show')
const parent3 = parent2.parentElement
if (parent3) {
parent3.classList.add('mm-active') // li
parent3.childNodes[0].classList.add('mm-active') // a
const parent4 = parent3.parentElement
if (parent4) {
parent4.classList.add('mm-active')
}
}
}
return false
}
return false
}
render() {
return (
<React.Fragment>
<div className='vertical-menu'>
<div data-simplebar className='h-100'>
{this.props.type !== 'condensed' ? (
// <Scrollbars style={{ maxHeight: '100%' }}>
<SidebarContent />
) : (
// </Scrollbars>
<SidebarContent />
)}
</div>
</div>
</React.Fragment>
)
}
}
最佳答案
您忘记添加路由器组件。
import { BrowserRouter } from "react-router-dom";
const rootElement = document.getElementById("root");
render(<BrowserRouter><App /></BrowserRouter>, rootElement);
Link
未指定的组件
Router
您可以使用
BrowserRouter
(使用内部历史 API),
HashRouter
(url hash) 或通用
Router
(您必须为其提供一些配置)
关于reactjs - 不变式失败 : You should not use <withRouter(Sidebar)/> outside a <Router>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61855718/
我是一名优秀的程序员,十分优秀!