Блог

Я новичок в React JS. Я создаю это приложение, но компонент не отображается. Я убедился, что все названия компонентов прописные. Я также убедился, что использую имя класса вместо класса. Это проблемы, которые я нашел в Интернете. Я не могу найти никаких других решений в Интернете. Я оставлю код здесь. Любые предложения, решения или рекомендации будут оценены по достоинству.

APP.JS

 import Topbar from "./components/topbar/Topbar";
import "./App.css";
import Home from "./pages/home/Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/movieList/movieList";
import Product from "./pages/movies/Movie";
import NewProduct from "./pages/newMovie/newMovie";
import Complain from "./pages/complains/Complains";
import Request from "./pages/requests/requests";
import Sub from "./pages/subsList/subsList";
import Login from "./components/Login";

function App() {
  return (
    <Router>
      <Topbar />
        <Switch>
          <Route exact path="/">
            <Login />
          </Route>
          <Route exact path="/home">
            <div className="container">
              <Home />
            </div>
          </Route>
          <Route path="/users">
            <div className="container">
              <UserList />
            </div>
          </Route>
          <Route path="/user/:userId">
            <div className="container">
              <User />
            </div>
          </Route>
          <Route path="/user/add">
            <div className="container">
              <NewUser />
            </div>
          </Route>
          <Route path="/movies">
            <div className="container">
              <ProductList />
            </div>
          </Route>
          <Route path="/movies/:movieId">
            <div className="container">
              <Product />
            </div>
          </Route>
          <Route path="/movies/add">
            <div className="container">
              <NewProduct />
            </div>
          </Route>
          <Route path="/complains">
            <div className="container">
              <Complain />
            </div>
          </Route>
          <Route path="/requests">
            <div className="container">
              <Request />
            </div>
          </Route>
          <Route path="/subscriptions">
            <div className="container">
              <Sub />
            </div>
          </Route>
        </Switch>
    </Router>
  );
}

export default App;
 

Компонент

 import "./newUser.css";
import React, { Component } from 'react';
import axios from 'axios';
export default class NewUser extends Component {

  constructor(props) {
    super(props);

    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangeEmail = this.onChangeEmail.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      username: '',
      email:''
    }
  }

  onChangeUsername(e) {
    this.setState({
      username: e.target.value
    })
  }

  onChangeEmail(e) {
    this.setState({
      email: e.target.value
    })
  }

  onSubmit(e) {
    e.preventDefault();

    const user = {
      username: this.state.username,
      email: this.state.email
    }

    console.log(user);

    axios.post('http://localhost:5000/users/add', user)
      .then(res => console.log(res.data));

    this.setState({
      username: ''
    })
  }


render(){
  return (
    <div className="newUser">
      <h1 className="newUserTitle">New User</h1>
      <form className="newUserForm">
        <div className="newUserItem">
          <label>Username</label>
          <input type="text"
                required
                className="form-control"
                value={this.state.username}
                onChange={this.onChangeUsername} />
        </div>
        <div className="newUserItem">
          <label>Email</label>
          <input type="text"
                required
                className="form-control"
                value={this.state.email}
                onChange={this.onChangeEmail} />
        </div>
        <input type="submit" value="Create User" className="btn btn-primary" />
      </form>
    </div>
  );
}
}
 

render способ использования

 <Route
 path="/user/add"
 render={() => (
   <div className="container">
     <NewUser />
   </div>
 )}
/>