React Router - Change state of other components

Question

When using React Router, how can I change the state of another component when the page is being routed?

For example, I have an app structured like this:

Header
==Link1 Link2==
Footer: "You are now at Home", button1, button2

When the user is routed to Link1, I would like to update the state of the footer so that it knows that it is currently on link1. For example, the footer is a toolbar, and some buttons will be disabled on Link1, but all buttons will be available on both Link2 and Home. Like this:

==Header==
==Link1 Link2==
==Content of Link1==
Footer: "You are now at Link1", button2

The solution I can think of is to wrap both the footer and content of the links into a big, single component, and set up routes to that whole component. But I'm not sure if this is a good practice, since I guess it kind of defeats the purpose of a "footer".

Another thought is that maybe I can change the state of the footer component when routing is in action, so the footer will re-render when it's necessary. The <Footer /> component thus sits outside of the main contents, on the same level like the <Header />. However, I have no idea how to do this.

Is there a better way to achieve this?

Here is the code snippet on CodeSandbox, I hope it could illustrate my problem better.

CodeSandbox demo

Cant we use location.pathname to judge what to render and what not to render in footer. The example sandbox that you mentioned doesnot have any history passed through Browserrouter, hence i tried using location.pathname. Butif you are passing any history along your tree, you can make use of this.props.history — simbathesailor
– simbathesailor, Commented Feb 6, 2018 at 12:34
@stack26 Hi, thanks for the reply but I'm not sure if I follow. Do we have to inspect the current URL or history to do this? Is it possible to let the router fire a simple signal to the Footer component and up its state? (not sure if what I want is an anti-pattern with React...) — SGMoore
– SGMoore, Commented Feb 6, 2018 at 13:21

Gabriele Petrioli · Accepted Answer · 2018-02-06 16:27:22Z

1

One way to go would be to use the withRouter HOC on the Footer so that it receives the props when the route is changed.

Changes to code

import { BrowserRouter, Route, Link, withRouter } from "react-router-dom";

then

<BrowserRouter>
  <div>
    <Route path="/" exact component={Home} />
    <Route path="/section1" component={SectionOne} />
    <WrappedFooter />
  </div>
</BrowserRouter>

and then

const WrappedFooter = withRouter(Footer);

You can now use the this.props.location.pathname inside the footer to access the currently matched route from the router. You should use the actual path in your switch let text, {location} = this.props

switch (location.pathname) {
  case '/': {
    text = 'Home'
    break
  }
  case '/section1': {
    text = 'Section One'
    break
  }
}

https://codesandbox.io/s/8y051k9qoj

answered Feb 6, 2018 at 16:27

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router - Change state of other components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related