Reactjs - 无法呈现功能组件

Question

I'm trying to render a functional component. But for some reason, I'm getting this sentence on the console You need to enable JavaScript to run this app.

This is App.js

import './App.css';
import Home from './components/pages/home/Home';
import SignUp from './components/pages/sign/SignUp';
import Checking from './components/pages/sign/Checking';
import Login from './components/pages/sign/Login';
import Summery from './components/pages/summery/Summery';
import UserList from './components/pages/users/Users';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UploadFiles from './components/pages/files/UploadFiles';

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path='/' element= {<Home />}/>
        <Route path='/sign-up' component= {Checking } />
        <Route path='/log-in' element= {<Login />} />
        <Route path='/admin' element= {<Summery />} />
        <Route path='/users' element= {<UserList />} />
        <Route path='/files' element= {<UploadFiles />} />
      </Routes>
    </Router>
  );
}

export default App;

Home, Login, Summery, UserList and UploadFiles are React Components and not functions. Only Checking is a function (Trying to convert everything to a function component). They all render but only Checking logging into console You need to enable JavaScript to run this app.

This is Checking.js file

import React from "react";
import '../../../App.css';
import Button from '@material-ui/core/Button';
import SendIcon from '@material-ui/icons/Send';
import axios from 'axios';
import bcrypt from 'bcryptjs';
import Navbar from "../../navbar/Navbar";
import { useNavigate  } from 'react-router-dom';

export default function Checking() {
    const [companyID, setCompanyID] = React.useState('');
    const [email, setEmail] = React.useState('');
    const navigate = useNavigate();

    function handleSubmit(Event) {
        Event.preventDefault();
            axios.post('/sign-up', {
                companyID: companyID,
                email: email})
              .then(res =>{
                  //console.log(res.json());
                  console.log(res);
                    if(res.status === 200){
                        //this.app();
                        //history.push('/login');
                    }else if (res.status === 400){
                        console.log("duplicate ID");
                    }
            }).catch(err =>{
                    // console.log("duplicate ID");
                    // console.log(err);
            });
        }  
    }
        return (
            <>
            <Navbar />
            <div className="register-container" ref={this.props.containerRef}>
                <h1 className="sign-up">SIGN UP</h1>
                <form onSubmit={handleSubmit}>
                    <div className="form">
                        <div className="form-group">
                            {/* <label htmlFor="company id">Company ID : </label> */}
                            <input
                                type="number" 
                                name="companyID" 
                                placeholder="Company id" 
                                value={companyID}
                                onChange={(e) => setCompanyID(e.target.value)}
                                required/>
                        </div>
                        { <div className="form-group">
                            {/* <label htmlFor="email">Email : </label> */}
                            <input
                                type="text" 
                                name="email" placeholder="Email"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                required/>
                        </div> }
                        
                        <div className="registerbtn">
                            {/* <button type="submit" class="btn btn-primary">Submit</button> */}
                            <Button type="submit" endIcon={<SendIcon />} color="primary" variant="contained">
                              Sign Up
                            </Button>
                        </div>
                    </div>
                </form>
            </div>
            </>
        );
}

What am I doing wrong?

Answer 1

Checking is also a react component and you need to render it like the others.

<Route path='/sign-up' element= {<Checking/> } />