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;