React：类型错误：尝试使用react-bootstrap容器时无法读取null的属性（读取'useContext'）

Question

如标题所述，我正在尝试创建一个布局组件，但使用任何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 错误。

Answer 1

路由器必须位于交换机上方：

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

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

Answer 2

此类错误的一个可能原因是具有react的

多个

版本。这可以由您的包管理器检查：

npm why react

/

yarn why react

。或者像

find . -name react

这样的 shell 命令。

可以将 React 的第二个（也是非预期的）版本作为传递依赖项引入，或者从一些棘手的包解析过程中引入。

如何消除多个版本取决于您使用的包管理器。 npm 有

package.json overrides

和

npm dedup

，yarn 有

resolutions

，依此类推。

Answer 3

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

import Container from 'react-bootstrap/Container'

Answer 4

我遇到了同样的错误，我通过更新引导程序版本修复了该问题。