CODEWITHSUNDEEP
reactjsreact-router-dom
Aldo aldo
Aldo aldo

Reputation: 412

React Link doesn't refresh page automatically

I am currently experiencing an issue similar to React Link doesn't refresh the page, however, the answer doesn't work well for my case.

See, I am currently using react-router to have a path called 'study/:id'. This :id variable will just be printed on the page

Here is the code for my BrowserRouter (App.js)

import React from 'react';
import './App.css';
import HomePage from './HomePage/HomePage';
import Study from './StudyPage/Study';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
 return (
   <Router>
     <Switch>
         <Route path="/" exact={true} component={HomePage}/>
         <Route path="/Study/:id" exact={true} component={Study} />
     </Switch>
   </Router>
 );
}

export default App;

Inside the Study component itself, it basically just has a menubar and an indicator on which courseId are we in:

import React from 'react';
import './Study.css';
import Menubar from '../Menubar';
import Sidebar from './Sidebar';
import Chapter from './Chapter';

class Study extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            courseId: this.props.match.params.id,
        };
    }

    render(){
        return(
            <div id="studyWrapper">
                <Menubar />
                <h1>We are on course: {this.state.courseId}</h1>
            </div>
        )
    }
}

export default Study;

In order for the user to navigate through the study pages, I use a menubar component like this (Menubar.js)

import React from 'react';
import './Menubar.css';
import { Nav } from 'reactstrap';
import { Dropdown, DropdownButton }  from 'react-bootstrap';
import { Link } from 'react-router-dom';

class Menubar extends React.Component{

  constructor(props){
    super();
    this.state = {
        courses: [],
        reload: false
    }
}

async componentDidMount(){
    const response = await fetch("/v1/courses/")
    const body = await response.json();
    this.setState({
        courses: body
    });
}

  render(){
    const {courses} = this.state
    return (
      <Nav className="navbar navbar-expand-md navbar-light menubarStyle fixed-top">
        <div className="container-fluid">
          <a className="navbar-brand logo" href="/">LOGO</a>
          <div className="navbar-collapse">
            <div className="navbar-nav">
              <div className="dropdown nav-item">
                <DropdownButton variant='Secondary' id="dropdown-basic-button" title="Browse Courses">
                  <Dropdown.Item as={Link} to={`/study/001`} >001</Dropdown.Item>
                  <Dropdown.Item as={Link} to={`/study/002`} >002</Dropdown.Item>
                  <Dropdown.Item as={Link} to={`/study/003`} >003</Dropdown.Item>
                </DropdownButton>
              </div>
            </div>
          </div>
        </div>
      </Nav>
      
    )
  }
}

export default Menubar

IRL, the study page basically looks like this What the menubar looks like

The problem

The problem that I am having is that, once I am in '/study/001' page already (just like the picture above). If I try to click on DropdownItem 002 from the menuBar, the URL will change to 'study/002', but the page won't change. It will not refresh. url changed to 002 but body is not changed

The solution from React Link doesn't refresh the page basically says to use windows.location.reload() but that doesn't work in my case, if we do that, when I click on dropdownItem 002, the URL will change to 'study/002' for a moment, but then 'study/001' will refresh thus making the page back to 001

My question is, is there a way for us to refresh the page whenever the url is changed by link ? Or if not, are there any other methods that I can use for this design? Maybe using links is not the right way in the first place?

Pardon the long post, I try to make it as clear as possible.

Thank you !

Upvotes: 1

Views: 1839

Answers (1)

Marcelo Viana
Marcelo Viana

Reputation: 314

Inside your Study component you could use componentDidUpdate and compare the current props with the prevProps to check if the url has changed and then change the state, which should cause your component to update. More or less you would have this code:

    componentDidUpdate(prevProps) {

        if( this.props.match.params.id !== prevProps.match.params.id ){
            this.setState({ courseId: this.props.match.params.id })
        };

    }

Upvotes: 1

Related Questions