Forem: Adi

Dynamic url-route generation for React web app with React-router-dom

Adi — Tue, 09 Aug 2022 09:55:00 +0000

Recently on a project I wanted to generate dynamic url routes, as you can see here, each fish has it's own page and each page has it's own dynamic url based on the fish's name. I set out to find out how to do it but surprisingly there wasn't much documentation on it and tutorials that did show how to do it were quite vague about it.

So how did I do it in my app? I used react-router-dom v6 in my app to help achieve this. Therefore, this tutorial assumes that you're familiar with react-router-dom to some degree, that being said this is a fairly simple tutorial as react-router-dom does most of the heavy lifting for you.

Let's see how it works:

Here while mapping over the fishStore array I am wrapping every
individual card component with a Link which will lead to every
fish's individual info page.

{
  fishStore.map((fishInfo, index) => {
    return (

      <Link

/* Below is the page path with an interpolated string where 
fishInfo.fishPath is the dynamic bit which is being used to 
generated each page's unqiue url from the array the pre-fixed main 
path stays the same */

        to={`/fish-info/${fishInfo.fishPath}`}
        state={{ fishInfo }}
        key={index}
      >
        <Card
          source={fishInfo.fishImageSrc}
          altText={fishInfo.fishImageAlt}
          fishName={fishInfo.fishName}
          fishScientificName={fishInfo.fishScientificName}
          key={index}
        />
      </Link>
    );
  });
}

Allocating the dynamic route variable in the Router:

In the Router we need to add the dynamic route

<Router>
  <StyledOuterContainer>
    <Routes>
      <Route path="/" element={<Home />} />

/* Below we are adding the Route path which goes to the 
<FishInfo/> component for rendering each fish's individual page */

      <Route path="/fish-info/:fish" element={<FishInfo />} />
      <Route path="*" element={<Exist />} />
    </Routes>
  </StyledOuterContainer>
</Router>;

Dynamic variable in the Route path string:

Here pay attention to the :fish in the Route path, which is pre-fixed by a colon : symbol. This is important as it tells react-router-dom that this part is subject to being dynamically changed and "/fish-info/" is the base string for every page that stays the same. This colon pre-fixed string can be any name you desire.

 <Route path="/fish-info/:fish" element={<FishInfo />} />

Now in order to access data in the fishInfo component you can do the following:

const location = useLocation()
const {fishInfo}: any = location.state

That's all you need to do, you have now completed generating dynamic urls for individual pages using react-router-dom.

How to hide and use API keys when hosting your web app on Netlify similar to .env files

Adi — Sun, 07 Aug 2022 06:07:00 +0000

If you're here, you're probably familiar with using .env file variables. If not head on over here to read my other article that helps you establish .env files to store API keys and other variables securely for local development.

Let's create environment variables similar to the .env files in Netlify:

Step 1: Go to Netlify -> Select your site -> Then select Deploys in the top navigation bar
Step 2: Then select Deploy Settings -> now select Environment in the left pane

Step 3: In Environment under Environment Variables -> Add in your environment variables with their values like shown below and remember to follow the format of REACT_APP followed by variable name in snake case as React requires it in that format in order to be used and hit save:

Step 4: In your app you should just be able to use in the component as follows:

const ApiKey = process.env.REACT_APP_API_KEY

That's it you're all done, you should now be able to use your hidden API key in your app even when it's hosted on Netlify.

Hiding API keys and links in .env files for local development of React web apps

Adi — Sun, 07 Aug 2022 05:39:00 +0000

A very secure way to storing and hiding API keys is by using a .env file. Note, in some circumstances outsiders will still be able to access the API keys when stored in the .env file but it is mostly assumed that the .env is not committed to your repository and is only used for local development. For deployed usage on hosting platforms like Netlify see my other article here.

Let's see how we can store an API key in a .env:

Firstly create a .env file in your project's root folder:

Now in the .env file let's declare the actual variable which will hold our API key:



/* The variable name must start with the format REACT_APP 
followed by the actual variable name in snake case */

REACT_APP_API_KEY = myApiKey

Now let's use our API key from the .env file in our component:



const ApiKey = process.env.REACT_APP_API_KEY

That's it we're all done!

Save scroll state in React when visiting an other page with a custom hook

Adi — Sun, 07 Aug 2022 05:04:00 +0000

The problem:

Saving scroll state is very a important for a good user experience especially when the page in your React web application is really long and has a lot of content. It can be quite annoying when a user visits another page and comes back to the previous page only to find out that they have to scroll from the top of the page all over again. Well we can save them this pain by adding a little code that saves the scroll position of the page the user was at before.

Lets create custom hook in useScrollPosition.js

import {useEffect} from "react";

// Object in which we will save our scroll position state
const scrollPositions = {};

/* custom hook which will save the scroll state and also set 
the scroll position of our page */
const useScrollPosition = (page) => {

    useEffect(() => {

// Get the scroll state if it exists

        const pageScrollPosition = scrollPositions[page];

// If it exists then set the scroll position of our page

        if (pageScrollPosition) {

/* Using setTimeout to set the scroll position of the 
page as useEffect gets triggered before the page has 
actually rendered */

            setTimeout(() => {
                window.scrollTo(0, pageScrollPosition);
            }, 50)

        }

/* save function to save the scroll position in 
the scrollPositions object */

        const save = () => {
            scrollPositions[page] = window.scrollY;
        }

/* Attaching an event listener to listen for a scroll event 
and then fire the save function everytime a scroll event occurs */

        window.addEventListener('scroll', save)

/* Removing the event listener when the component unmounts*/

        return () => {
            window.removeEventListener('scroll', save)
        };
    }, [page]);
}

export default useScrollPosition;

Now use the useScrollPosition hook in your component where you want to save the scroll state:

import useScrollPosition from "./useScrollPosition";

// Call the useScrollPosition hook with the page name

useScrollPosition("Home")

That's it! We're all done!

Save scroll state in React when visiting another page

Adi — Sat, 06 Aug 2022 08:41:00 +0000

The problem:

Saving scroll state is very important for a good user experience especially when the page in your React web application is really long and has a lot of content. It can be quite annoying when a user visits another page and comes back to the previous page only to find out that they have to scroll from the top of the page all over again. Well we can save them this pain by adding a little code that saves the scroll position of the page the user was at before.

Create two separate functions as follows:

// Object in which we will save our scroll position state
const state = {}

// Function to save the scroll state
export const saveState = (page, object) => {
    state[page] = object
}

// Function to get the scroll position state
export const getState = (page) => {
    return state[page]
}

In the main component where you want to retain the scroll position add the following code:


import {getState, saveState} from "./Util";

// Get stored scroll position state
const scrollPoint = getState('scrollState')
const scrollY = scrollPoint?.scrollY

/* useEffect to get and set the scroll position in the 
current page */
useEffect(() => {
    if (scrollY) {

/* setTimeout used to set the scroll position as the
useEffect triggers before the actual page renders */
        setTimeout(() => {
            window.scrollTo(0, scrollY);
        }, 50)
    }
}, [scrollY])

// useEffect to store the scroll position in the current page 
useEffect(() => {
    const save = () => {
        saveState('scrollState', {
// accessing the vertical scroll position in the window object
            scrollY: window.scrollY
        })
    }

/* Firing the save function whenever the event listener 
picks up a scroll event */
    window.addEventListener('scroll', save)
    return () => window.removeEventListener('scroll', save)

}, [])

You can also use this separately as a custom hook and then use it in every component/page where you intend to save the scroll position. See here in my other article where I use the same logic in a custom hook.

There you go, you have now successfully set the scroll state of your component.