React JS refresh page every time clicking on menu item using route

Question

I am new to React JS and I am currently building a simple application. I am using Route in order to navigate between components and everything work fine, but if I am on a page and I click again in the menu to navigate to the page, it doesn't refresh its content.

I just want the component to refresh its content every time I click on the item menu.

This is my sidebar class:

 class Sidebar extends Component {
constructor(props) {
    super(props);
}
render() {
    return (
        <Router>
            <Route render={({ location, history }) => (
                <React.Fragment>
                    <SideNav
                        onSelect={(selected) => {
                            const to = '/' + selected;
                            if (location.pathname !== to) {
                                history.push(to);
                            }
                        }}>
                        <SideNav.Toggle />
                        <SideNav.Nav>
                                <NavItem eventKey="Cars">
                                    <NavIcon>
                                        Cars
                                    </NavIcon>
                                </NavItem>
                                 <NavItem eventKey="Bicycles">
                                    <NavIcon>
                                        Bicycles
                                    </NavIcon>
                                </NavItem>
                        </SideNav.Nav>
                    </SideNav>
                    <main>
                        <Switch>
                            <Route exact path="/" component={props => <Home />} />
                            <Route
                                exact path="/Cars"
                                render={() => !isAllowed ?
                                    <Home /> :
                                    <Cars/>
                                } />
                            <Route
                                exact path="/Bicycles"
                                render={() => !isAllowed ?
                                    <Home /> :
                                    <Bicycles />
                                } />
                        </Switch>
                    </main>
                </React.Fragment>
            )}
            />
        </Router>
    )
}

}

This is my Cars Component class:

import React, { Component } from 'react';

class Cars extends Component {
    render() {
        return (
            <div style={{ textAlign: 'center', marginLeft: '295px' }} >
                <form>
                    <h1>Hello</h1>
                    <p>Enter your car name:</p>
                    <input
                        type="text"
                    />
                </form>
            </div>
        )
    }
}
export default Cars;

For ex. if I text something in input and after that I click on the item menu, I want that input to be refreshed.

I think that is not the correct way to load new items, in SPA we dont refresh page, we use router to navigate from route to route and load components — Akhil Aravind, Jan 29 '20 at 10:36
And how should I refresh my component in this case? Basically I have a form there, and I want to refresh the inputs, every time the item menu its clicked.. — Daniel Voila, Jan 29 '20 at 10:40
react native web for side menu item click to refresh dashboard,how can i do — Harsha, Aug 21 '20 at 07:46

Marko · Accepted Answer · 2020-01-29T11:01:53.527

1

In order to "refresh" (or in React world called Re-render) the content of the component you need to change it's state, and that is how React works. As I can see you don't have any state in your component so if you can specify what you wanna "refresh" we can help you.

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive.

Quick example from somewhere on the internet :

 import React from 'react';

  class Person extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        age:0
      this.incrementAge = this.incrementAge.bind(this)
    }

    incrementAge(){
      this.setState({
        age:this.state.age + 1;
      });
    }

    render(){
      return(
        <div>
          <label>My age is: {this.state.age}</label>
          <button onClick={this.incrementAge}>Grow me older !!<button>
        </div>
      );
    }
  }

  export default Person;

The age of inside of the label is being Re-rendered (or "refresh") every time when the user clicks on it since its state is changing.

Here is an official documentation and I would recommend you read it, it will clarify a lot of issues you are facing.

https://reactjs.org/docs/state-and-lifecycle.html

edited Jan 29 '20 at 11:01

answered Jan 29 '20 at 10:43

Marko

302
3
15

That component from above its used only for sidebar menu. – Daniel Voila Jan 29 '20 at 10:51
And is there a specific thing that you wanna change every time when the user clicks on the Item menu? – Marko Jan 29 '20 at 10:57
On the Cars component for example, I have a form where I have some input fields and basically I want to refresh those inputs. – Daniel Voila Jan 29 '20 at 11:01
Here is an answer to your question [link](https://stackoverflow.com/questions/46539480/react-clearing-an-input-value-after-form-submit/46539556) You need to store the state of the input field, and then every time when the form gets submitted you need to clear out the state of that input field. – Marko Jan 29 '20 at 11:05
I updated my request to understand better what I want – Daniel Voila Jan 29 '20 at 12:36

React JS refresh page every time clicking on menu item using route

1 Answers1