Question

当我使用NPM Start时，它会在Chrome中打开一个网页，但过一会后，它会显示

“噢，快点！显示此网页时出了点问题。”

GitHub Repository for the code. I can't give a small piece fo code because I don't know what is giving the error.

我希望它运行并显示我的网页。不知道为什么它不起作用。我第一次使用NPM启动服务器时，它会显示此页面。

Answer 1

问题出在Navbar.js

问题是您的班级名称为Nav，但Nav也用于渲染功能中。我已将Nav重命名为CustomNavbar，并从npm包中导入了引导导航。

将您的代码更改为此

import React from 'react';
import { Link } from 'react-router-dom';
import Navbar  from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { Button, FormControl, Form, NavDropdown } from "react-bootstrap";

export default class CustomNavbar extends React.Component {
  render() {
    return (
      <div>
        <Navbar bg="light" expand="lg">
          <Navbar.Brand href="#home">Pawsitively Delicious</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
              <Nav.Link href="/">Home</Nav.Link>
              <Nav.Link href="AboutUs.js">About Us</Nav.Link>
              <NavDropdown title="Ingredients" id="basic-nav-dropdown">
                <NavDropdown.Item href="./TypesOfDogTreats">Types of Dog Treats</NavDropdown.Item>
                <NavDropdown.Item href="AllIngredients.js">Ingredients</NavDropdown.Item>
              </NavDropdown>
            </Nav>
            <Form inline>
              <FormControl type="text" placeholder="Search" className="mr-sm-2" />
              <Button variant="outline-success">Search</Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  } // END OF RENDER
} // END OF Navbar

REACT网站npm start无法启动网站

1 个答案: