diff --git a/plop-templates/component.hbs b/plop-templates/component.hbs
index b982c07fea..ee365c00f6 100644
--- a/plop-templates/component.hbs
+++ b/plop-templates/component.hbs
@@ -4,11 +4,10 @@ import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
 
-function {{pascalCase name}}() {
+function {{pascalCase name}}(props) {
   // Do not remove the below lines. 
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // Your Code Start below.
diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx
index 238e0acf5f..8caeec6f5f 100644
--- a/src/common/routing/RouteDefs.jsx
+++ b/src/common/routing/RouteDefs.jsx
@@ -3,9 +3,11 @@ import { Footer, Header, Home, PageNotFound } from "common";
 import PlayList from "common/playlists/PlayList";
 import { getAllPlays } from "meta/play-meta-util";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { cloneElement } from 'react'
 
 const RouteDefs = () => {
   const plays = getAllPlays();
+
   return (
     <BrowserRouter>
       <Header />
@@ -14,7 +16,7 @@ const RouteDefs = () => {
         <Route path="/plays" element={<App />}>
           <Route index element={<PlayList />} />
           {plays.map((play, index) => (
-            <Route key={index} path={play.path} element={play.component()} />
+            <Route key={index} path={play.path} element={cloneElement(play.component(), {id: play.id})}/>
           ))}
         </Route>
         <Route path="/*" element={<PageNotFound />} />
diff --git a/src/plays/clock/CurrentTimer.jsx b/src/plays/clock/CurrentTimer.jsx
index 2b7c511f46..bbf3bfc15b 100644
--- a/src/plays/clock/CurrentTimer.jsx
+++ b/src/plays/clock/CurrentTimer.jsx
@@ -1,16 +1,15 @@
 
 import PlayHeader from 'common/playlists/PlayHeader';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 
 import "./clock.css";
 
-const CurrentTimer = () => {
+const CurrentTimer = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
+
   // Create a real-time date time counter
   const [date, setDate] = useState(new Date());
 
diff --git a/src/plays/counter/CounterApp.jsx b/src/plays/counter/CounterApp.jsx
index 11db6168f3..029f484e7f 100644
--- a/src/plays/counter/CounterApp.jsx
+++ b/src/plays/counter/CounterApp.jsx
@@ -1,14 +1,12 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 import Counter from "./Counter";
 import "./counter.css";
 
-function CounterApp() {
+function CounterApp(props) {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
   
   const [input, setInput] = useState("");
diff --git a/src/plays/date-time-counter/CdTimerComp.jsx b/src/plays/date-time-counter/CdTimerComp.jsx
index eb6d838838..b05e528ec8 100644
--- a/src/plays/date-time-counter/CdTimerComp.jsx
+++ b/src/plays/date-time-counter/CdTimerComp.jsx
@@ -1,13 +1,11 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import CountDownTimer from "./CountDownTimer";
 
-const CdTimerComp = () => {
+const CdTimerComp = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   const THREE_DAYS_IN_MS = 3 * 24 * 60 * 60 * 1000;
diff --git a/src/plays/movies/MovieContainer.jsx b/src/plays/movies/MovieContainer.jsx
index b1c8dd7567..a6292ab597 100644
--- a/src/plays/movies/MovieContainer.jsx
+++ b/src/plays/movies/MovieContainer.jsx
@@ -1,6 +1,5 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import Movie from "./Movie";
 
@@ -8,10 +7,9 @@ import useFetch from "common/hooks/useFetch";
 
 import "./movies.css";
 
-const MovieContainer = () => {
+const MovieContainer = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   const MOVIE_API_URI = 'https://json-faker.onrender.com/movies';
diff --git a/src/plays/org-tree/BasicTree.jsx b/src/plays/org-tree/BasicTree.jsx
index d41073cd3d..f24ad67d8b 100644
--- a/src/plays/org-tree/BasicTree.jsx
+++ b/src/plays/org-tree/BasicTree.jsx
@@ -1,5 +1,4 @@
 import PlayHeader from "common/playlists/PlayHeader";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import { org } from "./org";
 import React, { Fragment } from "react";
@@ -21,10 +20,9 @@ const Card = (props) => {
   );
 };
 
-const BasicTree = () => {
+const BasicTree = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
   
   return (
diff --git a/src/plays/random-meme-generator/RandomMemeGenerator.jsx b/src/plays/random-meme-generator/RandomMemeGenerator.jsx
index c3e7e44c13..1dfe4c7876 100644
--- a/src/plays/random-meme-generator/RandomMemeGenerator.jsx
+++ b/src/plays/random-meme-generator/RandomMemeGenerator.jsx
@@ -1,5 +1,3 @@
-
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 import { useState, useEffect } from 'react';
 import { FaSyncAlt } from 'react-icons/fa';
@@ -7,11 +5,10 @@ import { FaSyncAlt } from 'react-icons/fa';
 import PlayHeader from 'common/playlists/PlayHeader';
 import './random-meme-generator.css';
 
-function RandomMemeGenerator() {
+function RandomMemeGenerator(props) {
   // Do not remove the below lines. 
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // Your Code Start below.
diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx
index 2d81aec384..786bd0c386 100644
--- a/src/plays/social-card/SocialCard.jsx
+++ b/src/plays/social-card/SocialCard.jsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
@@ -11,10 +10,9 @@ import { SocialContext } from './context/SocialContext';
 
 import "./social-card.css";
 
-function SocialCard() {
+function SocialCard(props) {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // The social state carry the information of the social
diff --git a/src/plays/states/States.jsx b/src/plays/states/States.jsx
index 2010fcb200..f879100b0f 100644
--- a/src/plays/states/States.jsx
+++ b/src/plays/states/States.jsx
@@ -1,14 +1,12 @@
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import PlayHeader from "common/playlists/PlayHeader";
 import "./states.css";
 
-function States() {
+function States(props) {
   // Do not remove the below lines.
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // Your Code Start below.