当我尝试使用某个组件时页面变成空白

Question

我从 git 存储库中提取了代码，并向其中添加了两个新的文件组件 Men.js 和 Card.js。当我尝试路由到组件 Men.js 或 Card.js 时，页面变为空白，但文件夹中的所有其他现有组件都会呈现。没有错误显示。

即使没有路由，当我在 App.js

中使用 Men 和 Card 时也不会显示它们

Navbar.js

import React from "react";
import './style.css'
import {BrowserRouter,Route,Routes, Link} from 'react-router-dom';
import Home from "./Home";
import Usersignin from "./Usersignin";
import Usersignup from "./Usersignup";
import Nav from "./Nav";
import Card from "./Card";
import Footer from "./Footer";
import Men from "./Men";

export default function Navbar() {
  return (
    <>
    <BrowserRouter>
        <Nav/>
       <Routes> 

        <Route exact path='/' element={<Home/>}/>
        <Route exact path='/signin' element={<Usersignin/>}/>
        <Route exact path='/signup' element={<Usersignup/>}/>
        <Route exact path='/women' element={<Card/>}/>
        <Route exact path='/men' element={<Men/>}/>

      </Routes> 

      </BrowserRouter>
    </>
  );
}

Nav.js

import React from 'react'
import {Link} from 'react-router-dom'

export default function Nav() {
  return (
    <div class="container-fluid" id="nav-container">
      <nav className="container-fluid navbar navbar-expand-lg Navbar shadow px-2">
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">
            E-commerce
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className="nav-link" aria-current="page" to="/">
                  Home
                </Link>
              </li>
              <li className="nav-item dropdown">
                <a
                  className="nav-link dropdown-toggle"
                  to="#"
                  id="navbarDropdown"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  All Products
                </a>
                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li>
                    {/* <a className="dropdown-item" to="#">
                      1st Product
                    </a> */}
                    <Link className="dropdown-item" aria-current="page" to="/men">Men</Link>
                  </li>
                  <li>
                    {/* <a className="dropdown-item" to="#">
                    2nd Product
                    </a> */}
                    <Link className="dropdown-item" aria-current="page" to="/women">Women</Link>
                  </li>
                  {/* <li>
                    <hr className="dropdown-divider" />
                  </li> */}
                  <li>
                    {/* <a className="dropdown-item" to="#">
                    3rd Product
                    </a> */}
                    <Link className="dropdown-item" aria-current="page" to="/">Kids</Link>
                  </li>
                </ul>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="#">
                  Order Form
                </Link>
              </li>
              <li className="nav-item">
                <a className="nav-link">Gallery</a>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to='/signin'>Sign In</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to='/signup'>Sign Up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      </div>
  )
}

Men.js

import React from 'react'
import Card from './Card'

export default function Men() {
  return (
    <>
        <Card/>
        <Card/>
        <Card/>
    </>
  )
}

Card.js

import React from 'react'

export default function Card() {
  return (
    <div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="..."/>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
  )
}

所有其他组件，如 Usersignin,Usersignup,Home 全部呈现，它们来自现有的 git 存储库，我在添加 Men and Card 组件时提取了该存储库。我不明白为什么会这样，请帮助我。

Answer 1

我已经克隆了您的存储库并添加了缺少的组件（Men.js 和 Card.js）您的 Card.js 组件有问题。

您需要更改：

class 到 className
style="width: 18rem;" 到 style={{ width: "18rem" }}

(https://reactjs.org/docs/dom-elements.html#style)

就像这样，它就像一个魅力！ ;-) 但是你仍然有很多警告和很多事情要做;-)

import React from "react";

export default function Card() {
  return (
    <div className="card" style={{ width: "18rem" }}>
      <img src="..." className="card-img-top" alt="..." />
      <div className="card-body">
        <h5 className="card-title">Card title</h5>
        <p className="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" className="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  );
}

http://localhost:3000/men 输出：

http://localhost:3000/women 输出：

当我尝试使用某个组件时页面变成空白

Page goes blank when I try to use a certain component

reactjs

react-router

mern