正如标题中所述,我正在尝试创建一个布局组件,但使用任何react-bootstrap组件似乎都会给我错误。在这种情况下,使用我收到错误:
类型错误:无法读取 null 的属性(读取“useContext”)
该布局组件的代码如下:
import React from 'react';
import { Container } from 'react-bootstrap';
export const Layout = (props) => (
<Container>
{props.children}
</Container>
)
这是从下面的 App.js 调用的:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import './custom.css'
class App extends Component {
render () {
return (
<Layout>
<Switch>
<Router>
<Route exact path='/' component={Home} />
</Router>
</Switch>
</Layout>
);
}
}
export default App;
用 div 替换容器标签会按预期呈现,但任何使用 react-bootstrap 都会导致 useContext 错误。
Router必须在上面Switch:
<Router>
<Layout>
<Switch>
<Route path="/" component={Home} />
</Switch>
</Layout>
</Router>
https://codesandbox.io/s/dependent-zeh-r3vvl4 https://codesandbox.io/s/determined-zeh-r3vvl4
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)