How to update state after React Router changes automatically?

Question

I have a file with router and a component. Shortly, the code is like this:

// define the routes for each language ..
const InnerRoutes = (
    <Route>
        <IndexRoute page="home" component={StaticPage}></IndexRoute>
        <Route path="contacts" component={ContactsPage}></Route>
        <Route path="(:page)" component={StaticPage}></Route>
    </Route>
);

// define the routes for all the languages, using InnerRoutes .. 
const AllRoutes = (
    <Router history={browserHistory}>
        <Route path='/' component={App} language="bg">
            {InnerRoutes}
            <Route path="en" language="en">
                {InnerRoutes}
            </Route>
        </Route>
    </Router>
);

// and render our app ..
ReactDOM.render(
    AllRoutes,
    document.getElementById('app')
);

My question is: how can I have the App component state changed when router change is triggered? And of course - have the router params in the app state.

(Because currently I can take the router stuff from the App component's method componentDidUpdate and then trigger setState to change the App state. Unfortunately - then I have the componentDidUpdate triggered twice.)

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

I've added this to my App and it seems to receive changes when routes change. More reference here

class App extends React.Component {

  ...

  getInitialState() {
      return {
         lang: 'en' // default
      };
  }

  componentWillReceiveProps(props) {
      console.log('location: ', props.location.pathname);
      var newLang = props.location.pathname.split('/').shift();
      if(this.state.lang !== newLang) {
          this.setState({lang: newLang});
      }
  }

  render() {

    const lang = this.state.lang;

    return (
        <AboutPage language={lang} />
        <Support language={lang} />
    );
  }
}

If this doesn't work, you can also look into how two components talk to each other

edited May 23 '17 at 12:01

Community

1
1

answered Nov 08 '16 at 15:47

Taku

5,639
2
42
31

Ok, it goes from there, but it doesn't work for me. Because I have `language` in the `App` component state and when route changes - I want 1) the `App` state automatically changed and 2) the children receive new props from the top-level `App` component. ......... As I see - for now - I will have to manually change the state, checking the location, in `App` :( – pesho hristov Nov 08 '16 at 16:06
IMHO storing newLang into state is unnecessary. Just move logic to render method. `render() { const lang = this.props.location.pathname.split('/').shift(); ... }` – mauron85 Nov 08 '16 at 18:46
I see the logic here, but it still doesn't work for me. And the reason is that I rely on the router to change the `component for the page content`. But at the same time this `component for page content` has to pull the data from end point ... and it doesn't know the language about it. (My mistake is that I thought it will get it automatically from the `App` component, but it doesn't.) – pesho hristov Nov 09 '16 at 14:53
I asked a more-specific question about my problem ... apparently my initial thought was incorrect. http://stackoverflow.com/questions/40510303/can-not-do-multilingual-website-relying-on-react-router – pesho hristov Nov 09 '16 at 15:17

How to update state after React Router changes automatically?

1 Answers1