React.js bootstrap navbar not working together


I attempted to implement Routing to my React.js project. I noticed all of the examples using react-router created the navbar inside the App.js file. As soon As I created a Navbar Component as a separate file, I began to have issues, coupled with the fact that I am using bootstrap to style my components. My git hub repo of the work I’ve done so far:

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';

import NavbarComp from './components/Navbar/NavbarComp';
import About from './components/Pages/About';
import Contact from './components/Pages/Contact';
import ErrorPage from './components/Pages/ErrorPage';
import Work from './components/Pages/Work';



function App() {
  return (
    <div className="App">
      
      <NavbarComp/>
      <Router>
        <Routes>
          <Route path="/" element={ <Work /> } />
          <Route path="/about" element={ <About /> } />
          <Route path="/contact" element={ <Contact /> } />
          <Route path="*" element={ <ErrorPage /> } />
        </Routes>

      </Router>
      
      
      
    </div>
  );
}

export default App;

My Navbar component:

import React from 'react';
import {Container, Nav,Navbar,} from 'react-bootstrap';
import {Link} from 'react-router-dom';


function NavbarComp(){
    
        return (
          <Navbar bg="dark" variant="dark">
            <Container>
              <Nav className="mx-auto">
                 <Nav.Link as={Link} to="/">Work</Nav.Link> 
                 <Nav.Link  as={Link} to="/about">About</Nav.Link> 
                 <Nav.Link as={Link} to="/contact">Contact</Nav.Link> 
              </Nav>
            </Container>
          </Navbar>
        );
            
      

}

export default NavbarComp;

I am at a loss of what to do here. Is it always necessary to create your navigation bars inside the App.js?

Source: React – Stack Overflow

November 28, 2021
Category : News
Tags: react-bootstrap | react-router-v6 | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.