通过 mdbreact 设计组件

如何解决通过 mdbreact 设计组件

我从 mdbreact 网站上拿了现成的代码 我得到了错误

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 React 副本 有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

我希望你能帮助我

登录组件

import React from "react";
import { MDBContainer,MDbrow,MDBCol,MDBInput,MDBBtn } from 'mdbreact';


export default function LoginForm() {
    return(<MDBContainer>
        <MDbrow>
            <MDBCol md="6">
                <form>
                    <p className="h5 text-center mb-4">Sign in</p>
                    <div className="grey-text">
                        <MDBInput label="Type your email" icon="envelope" group type="email" validate error="wrong"
                            success="right" />
                        <MDBInput label="Type your password" icon="lock" group type="password" validate />
                    </div>
                    <div className="text-center">
                        <MDBBtn>Login</MDBBtn>
                    </div>
                </form>
            </MDBCol>
        </MDbrow>
    </MDBContainer>)

}

package.json

{
  "name": "react-complete-guide","version": "0.1.0","private": true,"dependencies": {
    "axios": "^0.19.2","axois": "0.0.1-security","bootstrap": "^4.6.0","history": "^5.0.0","immer": "^8.0.0","jquery": "^3.5.1","local-storage": "^2.0.0","mdbreact": "^5.0.2","popper.js": "^1.16.1","react": "^16.0.0","react-bootstrap": "^1.5.2","react-dom": "^16.0.0","react-hook-form": "^7.0.7","react-redux": "^5.0.6","react-router": "^3.2.6","react-router-dom": "^5.2.0","react-router-redux": "^4.0.8","react-scripts": "1.0.13","redux": "^3.7.2"
  },"resolutions": {
    "immer": "7.0.9"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';


import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />,document.getElementById('root'));
registerServiceWorker();

应用

import './App.css';
import React from 'react'
import { Provider } from 'react-redux'
import store from './newProject/Store/store'
import React from 'react';

import Routerapplication from './newProject/router'


function App() {
  return (
      <Provider store={store}>
       <Routerapplication></Routerapplication>
      </Provider>)
}
export default App

路由器

import { Route,Switch } from 'react-router-dom'
import LoginForm from './Component/LoginComponent/login'
import Signup from './Component/SignupComponent/signup'
import React from 'react'
export default function Routerapplication() {
    return <div>
        <Switch>
            <Route path='/signup'>
                <Signup></Signup>
            </Route>
            <Route path='/login'>
                <LoginForm></LoginForm>
            </Route>
        </Switch>
    </div>
}