React Component state based on URL

Question

I have a large website which has many sub websites under the main one. I have a SubNav that shows the name of the company's page we are currently visiting. As the user navigates between pages it should update the SubNav with the name.

This is what I have tried but to no avail.

Main Parent Root Component.

class AppRouter extends React.Component {
  state = { companySelected: "Main Company" };

   // this should update the company and name the SubNav bar 
  updateSelectedCompany = companySelected => {
    console.log("updated selected", companySelected);
    this.setState({ companySelected: companySelected });
  };

  render() {
    return (
      <Router history={history}>
        <div>
          <NavBar />
          <SubNav companySelected={this.state.companySelected} />
          <Switch>
            <Route path="/" component={LandingPage} exact={true} />
            <Route
              path="/company/1"
              component={SubCompany1}
              exact={true}
              updateSelectedCompny={this.companySelected}
            />
            <Route
              path="/company/2"
              component={SubCompany2}
              exact={true}
            />
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

The SubCompany1 Page looks like this:

class SubCompany1 extends React.Component {
  componentDidMount() {
    this.setState({ companySelected: "Sub Company 1" });
    console.log("Did Mount Sub Company1");
  }

  render() {
    return (
      <div>
        <h1>Sub Company 1</h1>
      </div>
    );
  }
}

Is this possible to pass each time a page is visited? I'm quite new to react and not entirely sure the best way to pass state between components.

Hi Justin, see my solution below, that should be sufficient to stop the components from needlessly re-rendering. — Cat_Enthusiast
– Cat_Enthusiast, Commented Jun 25, 2019 at 10:23

Cat_Enthusiast · Accepted Answer · 2019-06-25 10:21:45Z

You need componentDidMount() and shouldComponentUpdate()

AppRouter

class AppRouter extends React.Component {
  state = { companySelected: "Main Company" };

  updateSelectedCompany = companySelected => {
    this.setState({ companySelected: companySelected });
  };

  //if condition evaluates to true, component will update and re-render. if false, no re-render.
  shouldComponentUpdate(nextProps, nextState){
     return this.state.companySelected !== nextState.companySelected
  }

  render() {
    return (
      <Router history={history}>
        <div>
          <NavBar />
          <SubNav companySelected={this.state.companySelected} />
          <Switch>
            <Route path="/" component={LandingPage} exact={true} />
            <Route
              path="/company/1"
              component={() => <SubCompany1 updateSelectedCompany={this.updateSelectedCompany} />}
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

Subpage

class SubCompany1 extends React.Component {
  componentDidMount() {
      this.props.updateSelectedCompany("Sub Company 1");
  }

  render() {
    return (
      <div>
        <h1>Sub Company 1</h1>
      </div>
    );
  }
}

kzharas210 · Accepted Answer · 2019-06-25 09:56:00Z

1

You should pass your function updateSelectedCompany to child component

<Route
  exact={true}
  path="/company/1"
  component={() => <SubCompany1 updateSelectedCompany={this.updateSelectedCompany} />}
/>

Then call it there, which will change the state inside AppRouter component

componentDidMount() {
  this.props.updateSelectedCompany("Sub Company 1");
}

answered Jun 25, 2019 at 9:56

kzharas210

5001 gold badge5 silver badges14 bronze badges

3 Comments

Justin Over a year ago

this seems to work but I'm getting an error: Maximum update depth exceeded is that because I'm using ComponentDidMount?

Cat_Enthusiast Over a year ago

@Justin strange, do you have any other logic in your SubCompany1 component?

Justin Over a year ago

@ChristopherNgo nope just exactly what is show here. No further logic - but it looks like the components keep re-rendering

Collectives™ on Stack Overflow

React Component state based on URL

2 Answers 2

AppRouter

Subpage

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

AppRouter

Subpage

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related