REACT：TYPEERROR：尝试使用React-Bootstrap容器时，无法读取NULL的属性（Reading＆＃x27; UseContext＆＃x27;）
如标题中所述，我正在尝试创建一个布局组件，但是使用任何React-Bootstrap组件似乎给我带来了错误。在这种情况下，使用i获得错误：
typeError：无法读取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错误。
As stated in the title I am trying to create a layout component but using any react-bootstrap components seems to give me errors. In this case, using I get the error:
TypeError: Cannot read properties of null (reading 'useContext')
The code for this Layout component is below:
import React from 'react';
import { Container } from 'react-bootstrap';
export const Layout = (props) => (
<Container>
{props.children}
</Container>
)
And this is being called from App.js below:
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;
Replacing the container tags with div renders as expected but any use of react-bootstrap causes the useContext error.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
路由器必须在 switch 上：
https： //codesandbox.io/s/determined-zeh-r3vvl4
Router must be above Switch:
https://codesandbox.io/s/determined-zeh-r3vvl4
这种错误的一个可能原因是多个版本的
react。可以通过您的软件包管理器检查这：npm为什么React/纱线为什么React。或类似查找的外壳命令。 -Name React。可以将第二个（和意外）版本的React版本作为传递依赖性引入，也可以从某些棘手的软件包解析过程中引入。
如何消除多个版本取决于您使用的软件包管理器。 NPM具有
package.json Overrides和npm dedup，YARN具有andolutions，等等。One possible reason of such error is to have multiple versions of
react. This can be checked by your package manager:npm why react/yarn why react. Or a shell command likefind . -name react.A second (and unintended) version of react could be introduced as transitive dependency, or from some tricky package resolution process.
How to eliminate multiple versions depend on the package manager you use. npm has
package.json overridesandnpm dedup, yarn hasresolutions, and so on.我认为问题是您如何导入它。
I think the issue is how you import it.
我遇到了同样的错误，我通过更新Bootstrap版本解决了这一点。
I got the same error, I fixed that by updating my bootstrap version.