"How to make a functional Navbar“

Question

我是React的新手，我正在尝试用react-bootstrap实现Navbar。我已经设置了导航栏，但它实际上并没有链接到我的任何页面。

我试着浏览了一下文档，但没有太多的信息。我看过其他的帖子，但他们似乎都在使用老版本的react-bootstrap，或者根本不使用它。

import React from "react";
import ReactDOM from "react-dom";
import "./components/stylesheets/index.css";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
serviceWorker.unregister();

import React, { Component } from "react";
import "./components/stylesheets/App.css";
import NavBar from "./components/NavBar";
import Home from "./components/Home";
import About from "./components/About";

class App extends Component {
  render() {
    return <NavBar />;
  }
}

export default App;

import React, { Component } from "react";
import { Navbar, Nav, Form, FormControl, Button } from "react-bootstrap";
import "./stylesheets/NavBar.css";

class NavBar extends Component {
  state = {};
  render() {
    return (
      <div id="bar">
        <Navbar bg="light" variant="light">
          <Navbar.Brand href="#home">CALC-U</Navbar.Brand>
          <Nav className="ml-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#about">About</Nav.Link>
            <Nav.Link href="#updates">Updates</Nav.Link>
            <Nav.Link href="#profile">Profile</Nav.Link>
          </Nav>
        </Navbar>
      </div>
    );
  }
}

export default NavBar;

我希望应用程序自动打开到主页，然后打开其他页面，如果按钮是在navBar上点击。

Answer 1

使用用于导航栏的react-bootstrap的示例应用程序

App.js

function App() {
  return (
    <div>
      <Router>
        <NavBar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route path="/updates" exact component={Updates} />
          <Route path="/profile" exact component={Profile} />
        </Switch>
      </Router>
    </div>
  );
}
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Updates = () => <h1>Updates</h1>;
const Profile = () => <h1>Profile</h1>;

NavBar.js

class NavBar extends React.Component {
  state = {};
  render() {
    return (
      <div id="bar">
        <Navbar bg="light" variant="light">
          <Navbar.Brand href="/">CALC-U</Navbar.Brand>
          <Nav className="ml-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/about">About</Nav.Link>
            <Nav.Link href="/updates">Updates</Nav.Link>
            <Nav.Link href="/profile">Profile</Nav.Link>
          </Nav>
        </Navbar>
      </div>
    );
  }
}