javascript - React 组件未显示

Question

问题

所以我的 auth 文件夹中有两个文件，一个叫做 Signin，另一个叫做 SignUp。这两个文件除了名称之外是相同的。所有标签都是相同的，唯一的区别是文件和组件的命名。

出于某种原因，尽管我只能在以完全相同的方式创建另一个组件时才能看到 SignIn 组件。

这是 SignUp 组件，它没有被渲染。

import Axios from "axios";
import React, { useState, useContext } from "react";
import '../comStyles.css'
import UserContext from '../../context/UserContext';
import { useHistory } from 'react-router-dom';


export default function SignUp() {



    const [email, setEmail] = useState();
    const [password, setPassword] = useState();

    const { setUserData } = useContext(UserContext);
    const history = useHistory();


    const submit = async (e) => {
      e.preventDefault();
      const existingUser = {email, password};
      const loginRes = await Axios.post("http://localhost:8174/user/login", existingUser);
      setUserData({
        token: loginRes.data.token,
        user: loginRes.data.token
      });
      localStorage.setItem("auth-token", loginRes.data.token);
      history.push("/");
    }
  

      return (
        // <div className="w-50 bg-black signinbox align-items-center justify-content-center h-50">
        <div className="signinbox w-50 h-50">

       
          <div className="shadow-lg bg-black p-3">
            <h1 className="title my-2">UNT LMS</h1>
              <form onSubmit={submit}>
                <input id="login-email" className="form-control mr-sm-7 my-3" type="email" placeholder="Username" aria-label="Search" onChange={(e) => setEmail(e.target.value)}/>
                <input className="form-control mr-sm-7 shadow-lg bg-black rounded" type="password" placeholder="Password" aria-label="Search" onChange={(e) => setPassword(e.target.value)}/>
                <button className="bg-black signinbutton btn btn-outline-success my-4" type="submit">Sign Up</button>
              </form>
          </div>
          
        </div>



      );
    




}

它正在由另一个名为 AuthLinks 的组件呈现，就像这样。（登录方式相同）

<Link to="/SignUp" className="nav-link">
                        Sign Up
                    </Link>

这将创建一个链接，可以将您带到 /SignUp 组件或页面。

然而，实际上它确实将 url 更改为 /SignUp，因此页面上没有任何内容可显示。即使我转到 /SignIn，该组件也无法呈现，它可以很好地呈现给浏览器。

以下是 App.js 中路由的设置方式

import { NavBar } from './components';
import SignIn from './components/auth/SignIn';
import SignUp from './components/auth/SignUp';

<Switch>
            <Route path="/Books/list" exact component={BooksList} />
            <Route path="/Books/create" exact component={BooksInsert} />
            <Route path="/Books/update/:id" exact component={BooksUpdate} />

            <div className="vh-100 align-items-center justify-content-center">
                <Route path="/SignIn" exact component={SignIn} />
            </div>
            <div className="vh-100 align-items-center justify-content-center">
                <Route path="/SignUp" exact component={SignUp} />
                
            </div>
        </Switch>

故障排除

我已经阅读了有关组件及其大小写的其他问题。我不认为这是这个问题的情况。正如我尝试创建一个名为 Register 的全新文件并将所有内容更改为 /Register 一样。

我尝试使用 Lorem ipsum 以防文本或任何内容只是隐藏在导航栏后面。

我尝试将其作为 VH 屏幕的全宽和全高。

试图刷新页面。在端口 3000 上重新启动服务器

标签： javascriptreactjsreact-routerreact-router-dom