Rendering Footer depending of current URL React

Question

Using React, I am trying to partially show the footer when rendering an specific page. For all other pages the whole Footer should be shown.

This is my code, but it only works when refreshing the page which is not what I need. How should I code this to make it work as expected?

Is the use of window.location.href the right one for this case? Is the use of componentWillMount also right for this case?

Thanks a lot! Carlos

class Footer extends Component {
    constructor() {
        super()
        this.state = {
            currentUrl: '',
        }
    }

    UNSAFE_componentWillMount() {
        this.setState({ currentUrl: window.location.href })
    }
    componentWillUnmount() {
        this.setState({ currentUrl: '' })
    }

    render() {
        const { currentUrl } = this.state

        return (
            <footer className="section-grid">
                {currentUrl !==
                `${url || url_beta}/jetzt-vorsorgen/vorsorge-planen` ? (
                    <RB.Container>
                        <RB.Row>
                            <RB.Col
                                md={{ span: 11, offset: 1 }}
                                lg={{ span: 6, offset: 0 }}
                            >
                                <RB.Row>
                                    <RB.Col md={6} lg={{ span: 12, offset: 0 }}>
                                        <p className="headline">Kunde werden</p>
                                        <Button
                                            elementType="Link"
                                            pathLink="/jetzt-vorsorgen"
                                            size="lg"
                                            block
                                            variant="light btn-footer"
                                        >
                                            <i className="fa fa-file-text-o" />{' '}
                                            Angebot einholen
                                        </Button>
                                        <Button
                                            className="demo demo-right"
                                            elementType="Link"
                                            pathLink="/demokonto"
                                            size="lg"
                                            variant="primary btn-footer"
                                        >
                                            Zum Demokonto{' '}
                                        </Button>
                                    </RB.Col>

                                    <RB.Col
                                        md={6}
                                        lg={{ span: 10, offset: 0 }}
                                        xl={{ span: 6, offset: 0 }}
                                    >
                                        <p className="headline">
                                            Newsletter anmelden
                                        </p>
                                        <NewsletterForm />
                                    </RB.Col>
                                </RB.Row>
                            </RB.Col>
                            <RB.Col
                                md={{ span: 11, offset: 1 }}
                                lg={{ span: 6, offset: 0 }}
                            >
                                <FooterMenuList />
                            </RB.Col>
                        </RB.Row>
                    </RB.Container>
                ) : null}

                <RB.Container className="cp">
                    <RB.Row>
                        <RB.Col
                            lg={{ span: 6, offset: 6 }}
                            md={{ span: 11, offset: 1 }}
                            xs={12}
                        >
                            <RB.Row as="ul">
                                <RB.Col as="li" sm={4}>
                                    <Link to="/datenschutz">
                                        Datenschutzerklärung
                                    </Link>
                                </RB.Col>
                                <RB.Col as="li" sm={4}>
                                    <Link to="/impressum">Impressum</Link>
                                </RB.Col>
                                <RB.Col as="li" sm={4}>
                                    <p>
                                       {new Date().getFullYear()}
                                    </p>
                                </RB.Col>
                            </RB.Row>
                        </RB.Col>
                    </RB.Row>
                </RB.Container>
            </footer>
        )
    }
}

export default Footer

Answer 1

you need to install react-router-dom package. Then you can manage things like below.

If you want access to the route props. you need to wrap it in withRouter. With that you component can access route props

import React from "react";
import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {
  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export const Content = withRouter(ShowTheLocation);

But I believe you ideally want to achieve something like below. You can have a switch statement and render components within it. So below you have App.js with a Switch statement. I've also imported a Footer component with it's own switch statement.

import React from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import { Content } from "./Content";
import { Footer } from "./Footer";

export class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>

          <Switch>
            <Route path="/about">
              <div> About </div>
            </Route>
            <Route path="/topics">
              <div> Topic </div>
            </Route>
            <Route path="/">
              <div> Home </div>
            </Route>
          </Switch>
        </div>
        <Content />
        <Footer />
      </BrowserRouter>
    );
  }
}

You can have multiple switch statements in siblings

import React from "react";
import { Switch, Route } from "react-router-dom";

export class Footer extends React.Component {
  render() {
    return (
      <Switch>
        <Route path="/about">
          <div> About Footer </div>
        </Route>
        <Route path="/topics">
          <div> Topic Tooter </div>
        </Route>
        <Route path="/">
          <div> Home Footer</div>
        </Route>
      </Switch>
    );
  }
}

Here is a working example