Manage Nav State across multiple components (pages)

Question

Ok, so bear with me here. I'm really new to react so if this question has been asked before and I'm just not looking in the right places, I apologize.

I have a react app that I'm building and I've setup from the ground up using a tutorial online which walks through creating a nav bar at the top of the page (this works fine) as it's listed within the App.js file before my router switch.

What I'm trying to do is create a nav on the left pane for a '/settings' page that will only be seen if the path is /settings/* for example

YOu'd see the nav bar up top, then click on settings in my profile menu, and see a nav list on the left side that shows things like "My Account" /settings/myaccount "My Profile" /settings/myprofile "Terms of Service" /settings/tos etc... When you click on each of these pages it'll open a new component /settings/myaccount /settings/myprofile /settings/tos etc...

I also want to make sure my nav is updated on the left side and shows the proper 'item' highlighted. I've heard things about 'lifting' state on this but not sure if that's what I need to do or how to even go about this properly.

My thought was to create some type of component for /settings and then have another route switch in there for myaccount, myprofile, tos, etc... and just display my nav at the top of this /settings component page. Is that a viable option and just have something in that particular component that holds a state of 'isSelected' and set a class to highlight the nav Item in question?

Current code for my Routes.js file

export default ({ childProps }) =>
  <Switch>
    <AppliedRoute path="/" exact component={Home} props={childProps} />
    <AppliedRoute path="/login" exact component={Login} props={childProps} />
    <AppliedRoute path="/signup" exact component={Signup} props={childProps} />
    <AppliedRoute path="/settings" exact component={Settings} props={childProps} />

    { /* Finally, catch all unmatched routes */ }
    <Route component={NotFound} />
  </Switch>;

Code for my settings file which I want a nav in and routes to other pages

<Container>
        <Row>
          <Col lg="lg-2">
            <Nav vertical pills>
              <NavItem>
                <NavLink href="/settings/gear">My Gear</NavLink>
              </NavItem>     
              <NavItem>
                <NavLink href="/settings/profile">My Gear</NavLink>
              </NavItem>                                                           
            </Nav>
          </Col>
          <Col xs = "lg-10">
            <div className="Settings">
              Settings Page!

              <LoaderButton
                  style={{backgroundColor: "#fc4c02"}}
                  size="lg"            
                  //disabled={!this.validateForm()}
                  type="submit"
                  //isLoading={this.state.isLoading}
                  text="Connect Strava"
                  loadingText="Logging in..."
                  icon={<FontAwesomeIcon icon={faStrava}/>}
                  onClick={this.handleSubmit}
                >            
                </LoaderButton>          
            </div>
          </Col>
        </Row>
      </Container>

I don't have the state part set or the routes setup yet within settings. Because I don't want to have to re-do the nav list in every single page

You should read up on `react-router` or another comparable routing library if you're looking for route to component mapping. [Facebook recommends these](https://reactjs.org/community/routing.html) — John Ruddell, May 21 '19 at 17:29
Just to make sure I get the previous "Answer" this is the thought. Have a parent component called SettingsNav which maintains a state of what page is being viewed and that component will update the dom with that information with a handle (I can easily do that) Then, on each settings page, just do something like and this is sudo code: return { my page settings sub page info.... } — Brian Thomas, May 21 '19 at 17:48
or maybe setup redux or something to manage state more easily :) — John Ruddell, May 21 '19 at 17:52

Nils Kaden · Answer 1 · 2019-05-21T17:31:56.687

There is a very useful library for this purpose, called React-Router. You can find its documentation here: https://reacttraining.com/react-router/web/guides/quick-start

https://github.com/ReactTraining/react-router

If you want to create your own Navigation, you are already thinking along the right lines.

You want to have a parent component that holds the state for the navigation. This parent passes that state information down to your sidebar component, so it knows what page you are on. The parent component should also implement the click handlers for changing the state. The click handler functions should be passed down to the navigation, and bound to the navigation items.

Hope this helps you out!

I'm using React-Router :) I hate the response to this as it just messes up my code format. Give me a sec and i'll update the question. — Brian Thomas, May 21 '19 at 17:32

Peter Cheng · Answer 2 · 2019-05-21T18:28:38.803

If you want to avoid using redux and containers, the simplest way would be to have the navbar and the display as parts of the same component so the state is shared. Based on what the state is set to (by clicking on the navbar), you can conditionally render which of the 3 subcomponents you want.

The next step is to wrap the navbar component in a parent component which handles state choose which of the 3 subcomponents, or none, to render. If you're wondering how the navbar child component can change the state of it's parent, look here.

However in your case I would recommend against it for usability sake. It is better to make a separate subroute for each option. Imagine for a user of your site, if you want to link to the TOS settings page, you would have to provide them a link to the settings page and tell them to click on the TOS button on the navbar to the side. You could just provide them a link to mysite.com/settings/tos.

Manage Nav State across multiple components (pages)

2 Answers2