REACT 網站 npm start 不啟動網站

Question

當我使用 NPM Start 時，它會在 Chrome 中打開一個網頁，但過了一會兒，它說

“噢，Snap！顯示此網頁時出了點問題。”

代碼的 GitHub 存儲庫。 我不能給出一小段代碼，因為我不知道是什么導致了錯誤。

我希望它運行並顯示我的網頁。 不知道為什么它不起作用。 我第一次使用 NPM start 啟動服務器時，它給了我這個頁面。

Answer 1

問題出在Navbar.js

問題是您的班級名稱是Nav但Nav也用在了render函數中。 我已將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

Answer 2

我遇到了這個問題，對我來說問題是由添加按鈕組件引起的，所以我刪除了部分代碼

const checkButtonStyle = STYLES.includes(buttonStyle)?buttonStyle:STYLES[0]
const checkButtonSize = SIZE.includes(buttonSize) ? buttonSize: SIZE[0]

嘗試此鏈接以獲取有關如何解決它的更多選項

1 ：