时间戳

首页 > 解决方案 > 反应错误：无效的钩子调用 - 即使语法似乎正确

reactjs - 反应错误：无效的钩子调用 - 即使语法似乎正确

问题描述

我为多余的帖子道歉（我意识到有关此问题的问题已多次发布：/）。

但是，我已经浏览了多个帖子，但仍然看不到导致错误的原因。我使用的语法似乎是正确的。我曾尝试多次重写导出语句以及组件本身，但无济于事（一切都编译得很好）。我只是尝试使用引导反应组件将网站页面包装在容器中。任何帮助将不胜感激。代码如下：

导致错误的布局组件：

import Container from 'react-bootstrap/Container';

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 './App.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Layout } from './components/Layout';
import { Home } from './Home';
import { About } from './About';
import { Work } from './Work';
import { Design } from './Design';
import { Contact } from './Contact';
import { FourOFour } from './FourOFour';



class App extends Component {
 render() {
   return (
    <React.Fragment>
      <Layout>
      
        <Router>
          <Switch>

            <Route exact path='/' component={ Home } />
            <Route path='/about' component={ About } />
            <Route path='/work' component={ Work } />
            <Route path='/design' component={ Design } />
            <Route path='/contact' component={ Contact } />
            <Route component={ FourOFour} />

          </Switch>
        </Router>
      
      </Layout>
    </React.Fragment> 
   )
 }
}

export default App;

标签： reactjsreact-bootstrap

解决方案

如果其他人有这个问题，请检查 json 包文件中的依赖项，并确保其中列出了 bootstrap-react。如果不是，它将通过此​​错误。很容易忽略或可能安装在错误的文件夹中并认为它在那里。

推荐阅读