[Solved]-React-bootstrap navbar with React Router-Reactjs

Try these fixes:-

Since you use NavLink inside MyAppNavBar.js, then it will need BrowserRouter from react-router-dom to be functional.

Then you can either do:-

• Fixes 1 - Wrap everything in App.js with BrowserRouter or,
• Fixes 2 - You can just remove BrowserRouter in Routes.js

You just need ONE BrowserRouter anyway

Fixes 1

• Remove BrowserRouter from both index.js & Routes.js

• add & wrap everything inside App.js with BrowserRouter

• 'index.js':-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<App/>, document.getElementById('root')
);

• Routes.js:-

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/about'>
        <About />
      </Route>
      <Route path='/category'>
        <Category />
      </Route>
      <Route path='/products'>
        <Products />
      </Route>
      <Route >
        <NotFound />
      </Route>
    </Switch>

export default Routes;

• App.js:-

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

const App = () => 
    <Router>
        <MyAppNavbar />
        <Routes/>
    </Router>
export default App;

Fixes 2

Remove BrowserRouter from Routes.js

• Routes.js:-

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/about'>
        <About />
      </Route>
      <Route path='/category'>
        <Category />
      </Route>
      <Route path='/products'>
        <Products />
      </Route>
      <Route >
        <NotFound />
      </Route>
    </Switch>

export default Routes;