连接页面和 React-bootstrap Nav

Question

我使用 react-bootstrap 创建了一个导航栏。导航栏本身正在设计，但我不知道如何连接菜单项和页面。

我已经按照下面的格式在js中创建了所有的页面，只是为了显示一些东西。

./pages/Discover.js

import React from 'react';

export const Discover = () => (
    <div>
        <h2> Discover will come soon</h2>
    </div>
)

NavBar 定义如下：

./components/NavBar/NavBar.js

import React from 'react';
import { Container } from 'reactstrap';
import { Navbar, Nav} from 'react-bootstrap';
import NavDropdown from 'react-bootstrap/NavDropdown';
import SearchForm from './SearchForm';
import SiteLogo from '../../assets/images/village-logo.svg';

function NavBar(){
    return (
        <Container>
            <Navbar bg="white" expand="lg">
                <Navbar.Brand href="#home">
                    <img
                        src= { SiteLogo }
                        width="214"
                        height="28"
                        className="d-inline-block align-top"
                        alt="Village"
                    />
                </Navbar.Brand>
                <SearchForm />
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                    <Nav.Link href="#discover">Discover</Nav.Link>
                    <Nav.Link href="#create">Create</Nav.Link>
                    <Nav.Link href="#howitworks">How it Works</Nav.Link>
                    <Nav.Link href="#login">Login/Register</Nav.Link>
                    <NavDropdown title="Profile" id="basic-nav-dropdown">
                        <NavDropdown.Item>Firstname LastName</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.1">Profile</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Messages</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Settings</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.4">Logout</NavDropdown.Item>
                    </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </Container>
    );

}

export default NavBar;

我的仓库的结构如下图所示。有助于理解。

我正在尝试将 ./pages/ 中的 Discover.js 连接到 NavItem Discover，并将任何其他项目连接到它们的相应页面。

我尝试添加使用 Router，但我不确定这是不是好方法。

我的App.js 看起来像：

lass App extends Component  {
  render() {
    return (
      <Router>
        <div id="page-wrapper">
        <NavBar />
        <Switch>
            <Route exact path="/" component={Home}> </Route>
            <Route path="/discover" component={Discover}> </Route>
            <Route path="/createclassandhost" component={CreateClassAndHost}> </Route>
            <Route path="/howitworks" component={HowItWorks}> </Route>
            <Route component={NoPages}> </Route>
        </Switch>
        </div>
      </Router>
    );
  }

}

我认为这段代码可以让我将/ 重定向到home，但没有显示任何内容，就像我没有显示任何内容一样。 Home.js 的设计类似于上面的 Discover.js

任何想法，我如何将我的页面连接到 NAvBar 并让路由器工作？我尝试了很多教程，但每次都失败了。

这里是我的依赖：

dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "reactstrap": "^8.4.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.2"

欢迎任何帮助

Answer 1

要使用引导导航栏管理导航，我们可以使用 react-router-dom。

在 app.js 中

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import NavBar from './Components/NavBar'

export default function App() {
  return (
    <Router>
      <NavBar/>
        <Switch>
          <Route path="/route1">
            <Route1 />
          </Route>
          <Route path="/route2">
            <Route3 />
          </Route>
          <Route path="/route3">
            <Route3 />
          </Route>
        </Switch>
      <Footer/>
    </Router>
  );

然后在 Navbar 组件中，我们将 Nav.Link 替换为来自 react-router-dom 的 Link。

import React from "react";
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import {Link} from "react-router-dom";

const NavBar = () => (
  <Navbar collapseOnSelect expand="lg" variant="dark" bg="primary" fixed="top" >
        <Navbar.Brand href="/home" class="collapse navbar-collapse">
              <img
                src= { SiteLogo }
                width="90"
                className="d-inline-block align-top"
              />
        </Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
        <Nav  className="mr-auto" defaultActiveKey="/home" >
              <Link class="link" to="/">Home</Link>
              <Link class="link" to="/route1">route1</Link>
              <Link class="link" to="/route2">route2</Link>
              <Link class="link" to="/route3">route3</Link>
        </Nav>
    </Navbar.Collapse>
  </Navbar>
    );

export default NavBar;