score:1

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

const hoc = (Component, value) => () => (
  <>
    <main>
      <Component />
    </main>
    <Footer value={value} />
  </>
);

const Wrapper = ({ component: Component, value }) => (
  <>
    <main>
      <Component />
    </main>
    <Footer value={value} />
  </>
);

const WrapperRoute = ({ component, value, ...other }) => (
  <Route
    {...other}
    render={props => <Wrapper component={component} value={value} {...props} />}
  />
);

const Footer = ({ value }) => <footer>Footer! {value}</footer>;
const Header = () => <header>Header!</header>;

const Another = () => <Link to="/onemore">One More!</Link>;
const Home = () => <Link to="/other">Other!</Link>;
const OneMore = () => <Link to="/">Home!</Link>;
const Other = () => <Link to="/another">Another!</Link>;

export default () => (
  <BrowserRouter>
    <Header />
    <Switch>
      {/* You could inline it! */}
      <Route
        path="/another"
        render={() => (
          <>
            <main>
              <Another />
            </main>
            <Footer value="" />
          </>
        )}
      />
      {/* You could use a custom route component (that uses an HOC or a wrapper) */}
      <WrapperRoute
        component={OneMore}
        path="/onemore"
        value="I got one more!"
      />
      {/* You could use a Higher-Order Component! */}
      <Route path="/other" component={hoc(Other, "I got other!")} />
      {/* You could use a wrapper component! */}
      <Route
        path="/"
        render={() => <Wrapper component={Home} value="I got home!" />}
      />
    </Switch>
    {/* You could have another switch for your footer (inline or within the component) */}
    <Switch>
      <Route
        path="/another"
        render={() => <Footer value="Switch footer another!" />}
      />
      <Route
        path="/other"
        render={() => <Footer value="Switch footer other!" />}
      />
      <Route
        path="/onemore"
        render={() => <Footer value="Switch footer onemore!" />}
      />
      <Route path="/" render={() => <Footer value="Switch footer home!" />} />
    </Switch>
  </BrowserRouter>
);

score:1

function Footer() {

  const currentRoute = useSelector((state) => state.currentRoute);

  // RENDER FOOTER ACCORDINGLY TO THE CURRENT ROUTE
}

Related Query

More Query from same tag