Question

App.js

    import './App.css';
    import { BrowserRouter as Router, Route } from "react-dom";
    import SignInForm from "./components/SignInForm";
    import Login from "./login.svg";   
    function App() {
      return (
       <Router>
         <div className="App">

          <div className="App__Aside"></div>

          <div className="App__Form">

            <div className="PageSwitcher">

              <a href="#" className="PageSwitcher__Item">Sing In</a>
              <a href="#" className="PageSwitcher__Item PageSwitcher__Item--Active">Sign Up</a>

           </div>

           <div className="Form__Logo">
             <img src={Login}/>
           </div>

           <Route exact path="/" component={SignInForm}>
           </Route>

         </div>

        </div>
    </Router>
    );
  }

  export default App;

SignInForm.js

    import React, { Component } from "react";
    class SingInForm extends Component {
         render() {
              return (
                  <div className="FormCenter">
                  <form className="FormFields">
                     <div className="FormField">
                        <label className="FormField__Label" htmlFor="username">Username</label>
                        <input type="text" id="username" className="FormField__Input" placeholder="Enter username" name="username"/>
                     </div>
                  </form>
                  </div>
            );
         }
     }
    export default SingInForm;

期望一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记了出口您的组件来自定义它的文件，或者您可能已经混合使用设置默认名称并命名导入。

Answer 1

BrowserRouter，Route Navlink等是从react-router-dom导出的。

在您的代码库中，更改以下导入语句-

import { BrowserRouter as Router, Route } from "react-dom";

至-

import { BrowserRouter as Router, Route } from "react-router-dom";

Answer 2

App.js

import SignInForm from "./components/SignInForm";

到

import SignInForm from "./components/SigninForm";

错误的文件将 SigninForm.js 导入了文件。

在反应中获取错误元素类型无效

2 个答案: