how to update current route with different data on the same page

Admin 1
Viewed 19

I have a route with path = "/".Firstly when the component mounts I want to display that component in English and when the user clicks the different language let's say, Russian, I want that same component with route = "/" to be displayed in the Russian language.

I have created the functions to change the language according to the country and these functions will be called when the user clicks the Russian language from the drop-down list.

The problem here is the state is getting updated but the current route is not getting displayed with the selected language. I have tried Windows.go() and all other window methods but am still not able to get the desired result.What's the solution?

constructor(props) {
    super(props);
    this.state = {
      Col: "white",
      TextCol: "black",
      Country: "ae",
      Link: "",
    };
  }

  ConInd = () => {
    this.setState({ Country: "in" });
    this.setState({ Link: "/" });
  };

 
  ConRus = () => {
    this.setState({ Country: "ru" });
    this.setState({ Link: "/" });
    
  };


// navbar 

<li><Link className="dropdown-item" onClick={this.props.ConInd} to={this.props.Currlink}>India</Link></li>
    
<li><Link className="dropdown-item" onClick={this.props.ConRus} to={this.props.Currlink}>Russia</Link></li>

// route 

<Route exact path="/">
              <News
                key="general"
                pageSize={this.props.pageSize}
                country={this.state.Country}
                category={"general"}
              />
            </Route>
react-router reactjs javascript
1 Answers

I would provide a React key to the Route component. The Country state would be a good candidate since the key would be changing when the language changes. When the key updates the Route component will remount.

Example:

<Route key={this.state.Country} exact path="/">
  <News
    key="general"
    pageSize={this.props.pageSize}
    country={this.state.Country}
    category={"general"}
  />
</Route>
user_86908570
Related