React：TypeError：尝试使用 react-bootstrap 容器时无法读取 null 的属性（读取“useContext”）答案

【问题标题】：React: TypeError: Cannot read properties of null (reading 'useContext') when trying to use react-bootstrap containerReact：TypeError：尝试使用 react-bootstrap 容器时无法读取 null 的属性（读取“useContext”）
【发布时间】：2022-06-22 04:15:53
【问题描述】：

如标题中所述，我正在尝试创建一个布局组件，但使用任何 react-bootstrap 组件似乎都会给我错误。在这种情况下，使用我得到错误：

TypeError: Cannot read properties of null (reading '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 错误。

【问题讨论】：

你使用的是哪个版本的 react-router-dom？
@IgorGonak 5.2.0

标签： javascript reactjs components containers react-bootstrap

【解决方案1】：

Router必须在Switch之上：

<Router>
    <Layout>
        <Switch>
            <Route path="/" component={Home} />
        </Switch>
    </Layout>
</Router>

https://codesandbox.io/s/determined-zeh-r3vvl4

【讨论】：

不幸的是，这并没有阻止错误的发生，即使只是向 app.js 添加一个按钮也会导致所描述的问题
但是你看到我的密码箱工作了吗？沙盒和你的代码有什么区别？

【解决方案2】：

我认为问题在于你如何导入它。

import Container from 'react-bootstrap/Container'

【讨论】：

【解决方案3】：

我遇到了同样的错误，我通过更新我的引导程序版本解决了这个问题。

【讨论】：