Using React.js to display a different CTA button on the site's footer, depending on the page path

user_12457615 0
Viewed 446

The footer must display a different CTA depending on if the user is on the Home page, or on the Product page. The product page is a single page that renders product information of the item selected on the home pages, and the way I have accomplished that is by using useParams(), and creating the a correlation between the page.id (comes from the data file ) and pageID.

I thought I could do the same thing for the footer, but I am getting an error claiming that everything is undefined, literally, everything. This is my footer component. As you can see, I am importing the data for the footer from the data folder as "pageItems":

import React from 'react';
import { useParams } from 'react-router';
import pageItems from '../../data/footerData';

function Footer() {
  const { pageID } = useParams();

  const individualPage = pageItems.find(page => page.id === pageID);

  return (
    <div className="footer-container">
      <p>{individualPage.copy}</p>

      <a href="https://www.lego.com/kids" target="_blank">
        <img src={individualPage.cta} alt="cta" />
      </a>
    </div>
  );
}

The data file (which is just a javascript file) is structured in the following way:

const footerData = [
  {
    id: '1',
    copy: 'You can find more fun at',
    cta: HomeCta,
    href: 'https://www.something.com',
  },
];

I am sure I could create the correlation between <Route path="/:videoID"> (which works), and the footer, but I can't seem to get it right.

Edit: This is how my routing page is set up at the moment:

    return (
        <Router>

            <Navbar />

            <Switch>
                <Route path="/:videoID">
                    <FeaturedVideo />
                </Route>
                <Route exact path="/">
                    <Home />
                </Route>
            </Switch>

            <Footer />

        </Router>
    );
}

Any help will really help. thank you so much in advance!

And as a side note, I am using the react version that uses react hooks

react-router reactjs javascript
1 Answers

The solution is to keep <Footer /> inside <Router>, but outside of the <Switch> and assign it as a component to a <Route> with as many path values as whereas you want it to display.

Here's a working version on codesandbox

import React from "react";
import "./styles.css";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

const Footer = (props) => {
  let { videoID } = useParams();
  return <h3>Requested video ID: {videoID}</h3>;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Router>
        <Link to="/2">VideoID2 </Link>
        <Link to="/3">VideoID3 </Link>
        <Link to="/4">VideoID4 </Link>
        <Switch>
          <Route path="/:videoID">
            <p>You are viewing</p>
          </Route>
          <Route exact path="/"></Route>
        </Switch>
        <Route exact path={["/", "/:videoID"]} component={Footer} />
      </Router>
    </div>
  );
}
user_119302520
Related