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

Question

应用程序.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;

期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

标签： reactjs

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";