React Router works only after refreshing the page

I am a bit new to react and I am facing a problem with the Router. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/contactus), but the content don’t get updated (But if I do a refresh, it gets updated).

Here is my github repo: https://github.com/Arefaat18/Project

Here is my MainComponent.js

import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRouter,BrowserRouter as Router} from 'react-router-dom';
import Header from './HeaderComponent';
import ContactUs from './ContactUsComponent';
import AboutUs from './AboutUsComponent';
import Home from './HomeComponent.js';
import {connect} from 'react-redux';  

class Main extends Component {

  constructor(props) {
    super(props);

  }

  
  
  render() {

    return (
      <div>
        <Router>
        <Header />
        <TransitionGroup>
          <CSSTransition classNames="page" timeout={300}>
            <Switch>
              <Route path="/home" component={Home} />
              <Route exact path = "/contactus" component ={ContactUs} />
              <Route exact path = "/aboutus" component ={AboutUs} />
              <Redirect to="/home" />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
        </Router>
        </div>
    );
  }
}

export default withRouter(Main);

And here is my App.js file

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import {ConfigureStore} from './components/configureStore';

const store = ConfigureStore();

class App extends Component {


  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div className="App">
            <Main />
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

and here is the relevant dependancies

"react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.1",
    "react-redux-form": "^1.16.14",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.4",

And here is my ContactUsComponent, the other components are just the same with different text

import React, { Component } from 'react';

class ContactUs extends Component {

    render(){
        console.log("RENDER");
        return (
            <div>
                <h1> Contact Us</h1>
            </div>
        );
    }
}

export default ContactUs;

Thanks in advance.

Answer

Right, you’ve extraneous Routers declared, your header component has one. Remove this Router.

It is because each Router provides a routing context, and each component subscribing to a routing context gets the context from the closest router. The router providing context to the header wasn’t rendering any routes so that is why the URL would change but the router actually rendering the Routes wasn’t being notified that it should render a different path.

class Header extends Component {
  constructor(props) {
    ...
  }

  ...

  render() {
    return (
      <React.Fragment>
        {/* <Router> */} // <-- Remove this Router Component
        <Navbar dark expand="md">
          ...
        </Navbar>
        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
          ...
        </Modal>
        {/* </Router> */}
      </React.Fragment>
    );
  }
}

Advertisement

Answer