Dynamic Pages using React Router v6.3

KeithArogo — Tue, 28 Jun 2022 17:06:23 +0000

Dynamic pages and routes can be defined as pages that contain content relevant to them. An example of this could be a user’s profile page on a social media website. Social media platforms more often than not contain profile pages that display a user’s general information. Different users will have different information on their profiles but the overall structure stays the same, that is the essence of dynamic pages.

Let's see how we can implement this in React. We'll be using the Ghibli API to get a list of films and we'll implement dynamic pages and routes for all of them. Clicking on the film will then take you to a dynamic page that displays more information about the said film.

Step 1

Create a new React project using create-react-app. Also install React Router by running ‘npm install react-router-dom’ in your project folder via terminal. The react-router-dom package contains bindings for using React Router in web applications

Open the App.js file and remove the default code and add the following;

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import MoviePage from "./MoviePage";
import HomePage from "./HomePage";

const App = () => {
  return (
    <div>
      <Router>
        <Routes>
          <Route exact path="/" element={<HomePage />} />
          <Route path="/movie/:movieId" element={<MoviePage />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

Step 2

create another separate component called Homepage. This will be our homepage from where we'll call the Ghibli API to get film data. We've already defined a route for this component in App.js. Now let's go ahead and add in the API call.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";


const HomePage = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState();

    useEffect(() => {
      fetch("https://ghibliapi.herokuapp.com/films", {})
        .then((res) => res.json())
        .then((response) => {
          setData(response);
          setIsLoading(false);
        })
        .catch((error) => console.log(error));
    }, []);

    console.log("Data!", data);

    return (
      <>
        {!isLoading &&
          data.map((movie) => {
            return (
              <h5 key={movie.id}>
                <Link to={`/movie/${movie.id}`}>{movie.title}'s Page</Link>
              </h5>
            );
          })}
      </>
    );
  };

  export default HomePage;

We have two states, isLoading which could either be true or false should tell us whether we have received the data from the API or not.

We use a useEffect hook to fetch data when the HomePage component renders. When we obtain the data from the API we set the value of isLoading to false and data to whatever JSON we get.

Now, if you look at the jsx inside the HomePage component you'll see that we check the value of isLoading and if it's false, we map through the response data to render the names of the films.

Run your app with ‘npm start’ and you should see the film names on display.

Step 3

But, we don't just want a list of movies, we also want separate pages with dynamic routes for each of them.

So let's create another component called MoviePage which will fetch data from an API getting the details of each movie.

import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";

const MoviePage = () => {
  const { movieId } = useParams();
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState();

  useEffect(() => {
    fetch(`https://ghibliapi.herokuapp.com/films/${movieId}`, {})
      .then((res) => res.json())
      .then((response) => {
        setData(response);
        setIsLoading(false);
        console.log(`https://ghibliapi.herokuapp.com/films/${movieId}`);
      })
      .catch((error) => console.log(error));
  }, [movieId]);
  console.log(data);

  return (
    <>
      {!isLoading && (
        <>
          <h1>Title: {data.title}</h1>
          <h2>Plot: {data.description}</h2>
          <Link to="/">Back to homepage</Link>
        </>
      )}
    </>
  );
};

export default MoviePage;

We have defined a MoviePage component which lists details about each person by getting data from the API in the same fashion as HomePage. We have also defined a new route for this component i.e, movie/:movieId. This is a bit different compared to our regular routes. Here we pass a parameter movieId through the route. That way a single component at that route can be dynamic based on that parameter.

HomePage returns links to this dynamic route with the movie id as the route parameter.

If you observe MoviePage closely, you'll realize that while the structure of it stays the same, all the content on the page is dependent on movieId i.e, the component is fully dynamic.

The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the . Child routes inherit all params from their parent routes. useParams hook lets you access the parameters of the current route.

Conclusion

If you'd like to gain more insight into React Router, read the official docs,

React Router Docs

Broken Links on Netlify React.js using React Router solution

KeithArogo — Fri, 17 Jun 2022 13:59:46 +0000

react #reactrouter #netlify

This solution is for anyone who has deployed a React Single Page Application using Netlify’s hosting services and ran into a ‘Page Not found’ error after refreshing any page that isn’t the default homepage.

You’re probably confused because the said issue does not occur when interacting with the App on the local host server, so what could have gone wrong?

The reason is fairly simple but not too obvious, React Router is set up to handle routing on the browser/client-side. That said, refreshing the website on any page other than the root (all routes are specified at the root level) means that Netlify won’t understand how to handle the specific route.

Solution.

The solution is to create a file and name it ‘redirects’ to the root of our site inside the ‘public’ folder/directory _(path = ‘public/_redirects’) and type in/copy-paste the following;
/* /index.html 200

This works because Netlify offers a _redirects file, which you can add to your codebase along with the rest of your files and folders. This will equip Netlify with the required information in order to handle URLs that are not handled on the browser.

For more details, visit the official Netlify documentation.

DEV Community: KeithArogo