0

We have menu, and when someone clicks on button new component should load, but that doesn't happen every time. Basically we have 2 Browserouters. 1 in App.js where Intlprovider is and one in Home.js where menu is. I will provide the code down here. We have other versions of our app, that doesn't use react-intl, and it works perfectly. Please help.

Tried to change position of intlProvider, from app.js to index.js but that wont resolve problem.

Home.js render method:

render() {
    return (
      <IntlProvider
        locale={this.state.lang}
        messages={messages[this.state.lang]}
      >
        <React.Fragment>
          <Router>
            <Switch>
              <Route
                path="/Pocetna"
                component={() => (
                  <Pocetna
                    handleLangS={this.handleLangS}
                    handleLangE={this.handleLangE}
                  />
                )}
              />
              <Route
                path="/Home"
                component={() => (
                  <Home
                    handleLangS={this.handleLangS}
                    handleLangE={this.handleLangE}
                  />
                )}
              />
              <Route path="/" component={LoginForms} />
              {this.props.children}
            </Switch>
          </Router>
        </React.Fragment>
      </IntlProvider>
    );
  }

Home.js menu(All buttons to change menu are in Sidemenu component):

<Router>
                <Switch>
                  <SideMenu
                    funkcija={this.PromenaAkcije}
                    ime={this.state.ime}
                    prezime={this.state.prezime}
                    slika={this.state.slika}
                    uloga={this.state.uloga}
                    RoditeljPromeniSliku={this.PromeniSliku}
                    podaciOProjektima={this.state.sviProjekti}
                    stigle={this.state.stigle}
                    promenjenaSlika={this.PromenjenaSlika}
                    brojRoditelja={this.state.brojRoditelja}
                    kompanija={this.state.kompanija}
                    definisiProjekat={this.definisiProjekat}
                  />

                  <Route
                    exact={true}
                    path="/home/dashboard"
                    component={Dashboard}
                  />
                  <Route
                    exact={true}
                    path="/home/adduser"
                    component={AddUser}
                  />
                  <Route
                    exact={true}
                    path="/home/projects"
                    component={Projects}
                  />
                  <Route
                    strict
                    exact={true}
                    path="/home/addproject"
                    component={AddProject}
                  />
                  <Route
                    strict
                    exact={true}
                    path="/home/addsubproject"
                    component={AddSubproject}
                  />
                  <Route
                    exact={true}
                    path="/home/project"
                    component={Project}
                  />
                  <Route
                    exact={true}
                    path="/modal/newSpriteModal"
                    component={newSpriteModal}
                  />
                  <Route
                    exact={true}
                    path="/home/myprofile"
                    component={MyProfile}
                  />

                  <Route exact={true} path="/home/users" component={Users} />

                  <Route exact={true} path="/home/task" component={Task} />
                </Switch>
              </Router>
  • Welcome to stackoverflow! Which components don't get loaded? "that doesn't happen every time" might be something with the state of a component. Is `this.state.lang` always a value if the `IntlProvider` is rendered? – Björn Böing May 29 '19 at 09:41
  • Is there any reason why you have 2 different routers? Depending on how you've structured your code, one router is enough to handle your routes. And then you can use a (HOC) component to serve `IntlProvider` wherever you need it – Ladi Adenusi May 29 '19 at 09:53

0 Answers0