使用JS自定义交互式导航栏，不起作用

Question

我正在尝试使用react-js 编写一个包含四个页面（主页、关于、Mint、画廊）的铸币网站。我使用了react-bootstrap来生成“NavBar.js”文件中每个单独页面的链接：

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import {Link} from "react-router-dom";
import '/Users/macbook/new-site/src/App.css';


const NavBar = ({}) => {
    return (
      <Navbar expand='lg' bg="secondary" variant='dark'>
        <Container>
          <Navbar.Brand href="#home"></Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link as={Link} to='/home' >Home</Nav.Link>
              <Nav.Link as={Link} to="/about">About</Nav.Link>
              <Nav.Link as={Link} to="/gallery">Gallery</Nav.Link>
              <Nav.Link as={Link} to="/mint">Mint</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    );
};

export default NavBar;

然后将NavBar功能导入到App.js文件中，并使用react-router-dom生成路由。

import { Routes, Route, BrowserRouter } from 'react-router-dom';
import '/Users/macbook/new-site/src/App.css';
import NavBar from './components/NavBar';
import Home from './pages/home';
import About from './pages/about';
import Gallery from './pages/gallery';
import Mint from './pages/mint';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <>
        <NavBar className='NavBar'/>
        </>
      
        <Routes>
          <Route index element={<Home/>} />
          <Route path='/home' element={<Home />}/>
          <Route path='/about' element={<About />}/>
          <Route path = '/gallery' element={<Gallery />} />
          <Route path='/mint' element={<Mint />} />
        </Routes>
     
        </div>
      {/*<div className='moving-background'></div>*/}
    </BrowserRouter>  
  );
}

export default App;

根据我的阅读，NavBar.js 中显示的代码应该使用颜色和组件之间的一些分隔来自定义导航栏，但是，这是我当前的主页...

我也会展示我的package.json：

{
  "name": "new-site",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.1.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@chakra-ui/react": "^2.8.1"
  }
}

我还将展示 app.css 文件，以防有帮助：

@import url("https://fonts.googlesapi.com/css?family=Press+Start+2P");
@import url("https://fonts.googlesapi.com/css?family=VT323");

.App {
  text-align: center;
  font-family: "Press Start 2P", "VT323";
  color: black;
}

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.overlay {
  opacity: 0.85;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}

.moving-background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/background/parallax-bg.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 40% 40%;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

关于定制方面的任何建议都会很棒。请注意，链接/路线均按计划工作，并按预期移至另一个页面。

Answer 1

对于其他看到同样问题的人，您必须运行该行

import 'bootstrap/dist/css/bootstrap.css'

在您的index.js 文件中（务必阅读安装指南）