使用 React Router 和导入其他组件的外部组件时出现错误 "React.createElement: type is invalid -- expected a string"

Question

尝试在外部组件中使用来自 'reactstrap' 的 {Input} 等组件时出现以下错误，看来我没有很好地导入 reactstrap 和我的其余部分组件不知何故。

我的App.jsx是这样的：

import React, {Component} from 'react';
import './App.css';
import Login from './Login';
import {BrowserRouter as Router, Link, Route} from 'react-router-dom'

class App extends Component {
render() {
    return (
        <Router>
            <div className="App">
                <Link to="/login">
                    <h3 className="App-menu-title">Login</h3>
                </Link>
                <Route exact={true} path="/" component={Login}/>
            </div>
        </Router>)
}
}

export default App;

这是我的 Login.jsx

import React, {Component} from 'react';
 import {Input} from 'bootstrap';


class Login extends Component {
render() {
    return (
        <div>
        <Input />
        </div>
    )
}
}

export default Login;

这是我得到的错误

index.js:2178 Warning: React.createElement: type is invalid -- 
expected a string (for built-in components) or a class/function (for 
composite components) but got: undefined. You likely forgot to export 
your component from the file it's defined in, or you might have mixed 
up default and named imports.

Check your code at Login.jsx:9.
in Login (created by Route)
in Route (at App.jsx:14)
in div (at App.jsx:10)
in Router (created by BrowserRouter)
in BrowserRouter (at App.jsx:9)
in App (at index.js:9)

Answer 1

您错误地导入了 Input 组件，您需要从 reactstrap 导入它，而不是从 bootstrap

导入它

import {Input} from 'reactstrap';

Answer 2

您从 bootstrap 导入，而不是从 reactstrap...

如果您正在使用 create-react-app and have problems using reactstrap, the following may help: How to install Reactstrap。

关于使用 reactstrap 的受控组件的表单示例，您可以查看 here。

Answer 3

您需要从 reactstrap 而不是 bootstrap

导入输入

import { Input } from 'reactstrap'

使用 React Router 和导入其他组件的外部组件时出现错误 "React.createElement: type is invalid -- expected a string"

Getting Error "React.createElement: type is invalid -- expected a string" when using React Router and external component that imports other Components

reactjs

react-router

reactstrap