Connect pages and React-bootstrap Nav

Question

I have created a NavBar using react-bootstrap. The Navigation bar itself is desing but I do not know how to connect menu item and pages.

I have created all the Pages in js following the format below, just to display something.

./pages/Discover.js

import React from 'react';

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

the NavBar is defined as below :

./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;

The structure of my repo is as the image below shows. It can help to understand.

I am trying to connect the Discover.js from ./pages/ to the NavItem Discover and any other items to their corresponding pages.

I have tried to add use a Router but I am not sure it's the good way.

My App.js is looking like:

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>
    );
  }

}

I thought that this code will allow me to redirect / to home but nothing is displayed it's like I am not showing anything. the Home.js is design like the Discover.js above

Any idea, how I can connect my pages to the NAvBar and also make the Router working ? I tried many tutorial and each time I fail.

here my dependencies:

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"

Any help are welcome

Answer 1

To manage the navigation with the bootstrap navbar, we can use react-router-dom.

in 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>
  );

Then in the Navbar component we replace Nav.Link by Link from react-router-dom.

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;