Trying to pass state through link - React - reactjs

Question

I can't figure out why I cannot pass state from component ArrayList to ArrayList2. Can anyone chime in and offer a solution to the problem. I think I've exhausted every SO thread, YouTube video and Google search on the subject and I keep getting the following error message,
"Uncaught TypeError: Cannot destructure property 'message' of 'location.state' as it is null.".
My code is as follows:
Component 1
import "./App.css";
import ArrayList from "./ArrayList";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import ArrayList2 from "./dataFolder/ArrayList2";
function App() {
return (
<Router>
<Routes>
<Route exact path="*" element={<ArrayList />} />
<Route exact path="/2" element={<ArrayList2 />} />
</Routes>
</Router>
);
}
export default App;
Component 2
import { Link } from "react-router-dom";
import "./App.css";
import Years from "./dataFolder/Years";
import NavBar from "./NavBar";
function ArrayList() {
const years = Years;
return (
<div className="App">
<NavBar />
<nav>
<ul className="no-bullets">
{years.map((item) => (
<Link
className="no-link-style"
to={{
pathname: "/2",
state: { message: "This is a passed Item" },
}}
>
<li>{item}</li>
</Link>
))}
</ul>
</nav>
</div>
);
}
export default ArrayList;
Component 3
import React, { useState } from "react";
import { useLocation } from "react-router-dom";
import ArrayList from "../ArrayList";
import NavBar from "../NavBar";
function ArrayList2(props) {
const types = ["General", "Primary"];
const location = useLocation();
const { message } = props.location.state;
console.log(message)
return (
<div className="App">
<NavBar />
<ul className="no-bullets">
{types.map((item) => (
<li>{item}</li>
))}
</ul>
</div>
);
}
export default ArrayList2;
Any help on this would be greatly appreciated.

Answer 1

As I can see from the first code block, you are not passing any prop to ArrayList component, you are passing it to Link prop. Without passing a prop to the ArrayList component you are trying to access it. This leads to destructuring of an undefined value. You can use the passed route parameters by using the useParams hook that is defined in the react-router package.