reactjs - 我创建了一个反应项目并进行了路由。在路由中，我正在努力解决语法错误

问题描述

我创建了 React 项目，在该项目中我创建了一个文件夹并将其命名为 Pages。在 Pages 文件夹中，我有一个文件夹并将其命名为 Home，在那个 Home 文件夹中，我有 Home.js 和 Home.css 文件。再次在 Pages 文件夹中，我有另一个文件夹并将其命名为 Registration，在该文件夹中我有 Registration.js 和 Registration.css。再次在 Pages 文件夹中，我有另一个文件夹并将其命名为 Login 在该文件夹中我有 Login.js 和 Login.css。我创建了另一个文件夹并将其命名为该文件夹中的组件我有另一个文件夹导航栏。在 Navbar 文件夹中，我有 Navbar.js 和 Navbar.css 文件。现在我安装了 react-router-dom npm 并进行了路由，但我遇到了语法错误，请帮我解决这个错误。错误是这样的：
元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是 App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Navbar from './Components/Navbar/Navbar';
import Home from './Pages/Home/Home';
import Login from './Pages/Login/Login';
import Registration from './Pages/Registration/Registration'

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route path=''><Home></Home></Route>
          <Route path='/reg'><Registration></Registration></Route>
          <Route path='/log'><Login></Login></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

这是 Navbar.js

import React, { Component } from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';


class Navbar extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <a className="navbar-brand" href="www.facebook.com">Mern Stack</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav">
                        <li className="nav-item active">
                            <Link to='' className='nav-link'>Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link to='/reg' className='nav-link'>Registration</Link>
                        </li>
                        <li className="nav-item">
                            <Link to='/log' className='nav-link'>Login</Link>
                        </li>
                    </ul>
                </div>
            </nav>
        )
    }
}

export default Navbar

这是 Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/jquery/dist/jquery.min.js';
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';



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


serviceWorker.unregister();

这是 Home.js

import React, { Component } from 'react';
import './Home.css';


class Home extends Component {
    render() {
        return(
            <div className='container'>
                <div className='row'>
                    <h1>Home works</h1>
                </div>
            </div>
        )
    }
}

export default Home

这是 Login.js

import React, { Component } from 'react';
import './Login.css';

class Login extends Component {
    render() {
        return(
            <div className='container'>
                <div className='row'>
                    <h1>Login works</h1>
                </div>
            </div>
        )
    }
}

export default Login

这是 Registration.js

import React, { Component } from 'react';
import './Registration.css';


class Registration extends Component {
    render() {
        return(
            <div className='container'>
                <div className='row'>
                    <h1>Registration works</h1>
                </div>
            </div>
        )
    }
}

export default Registration

标签： reactjs

import React, { Component } from 'react'; class Home extends Component { constructor(props) { super(props) this.state = { } } render() { return ( <div>hai</div> ) } } export Home

reactjs - 我创建了一个反应项目并进行了路由。在路由中，我正在努力解决语法错误

问题描述

解决方案

推荐阅读