0

Please tell me what's wrong in this when I am clicking on nav link the url is changing but the content is not changing I am trying all the ways but can't figure out the problem, please have a look at this

App.js

import React, { Component } from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
import Nav from './components/Nav';
import Contact from './components/Contact';

class App extends Component {
  render(){
    return (
      <React.Fragment>
          <div id="page-wrapper">
          <Router>
            <Nav />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/about" exact component={About} />
              <Route path="/contact" exact component={Contact} />
              <Route ><Default /></Route>

            </Switch>
            <Footer />
          </Router>
          </div>
      </React.Fragment>
    );
  }
}

export default App;

My link file i.e nav bar

<Link to="/">
     <li className="nav-item">HOME</li>
 </Link>
 <Link to="/about">
     <li className="nav-item">About</li>
 </Link>

Thanks in advance

Abu Sufian
  • 991
  • 1
  • 6
  • 15
Rohit doddapani
  • 21
  • 5

1 Answers1

1

Moving your BrowserRouter to index.js seems to work in my end.

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

Then remove <Router> from your code.

jtrcarlos
  • 46
  • 1
  • 4