I Am Making A Article Page Using ReactJs Everything Is Fine But I Am Facing Errors While I Am Clicking One Article It Is Not Showing On Screen While Inspecting There Errors Goes Like Uncaught TypeError: Cannot read properties of undefined (reading 'params') The above error occurred in the component:
Article Page JS
import React from 'react';
import ArticlesList from '../components/ArticlesList';
import NotFoundPage from './NotFoundPage';
import articleContent from './article-content';
const ArticlePage = ({ match }) => {
const name = match.params.name;
const article = articleContent.find(article => article.name === name);
if (!article) return <NotFoundPage />
const otherArticles = articleContent.filter(article => article.name !== name);
return (
<>
<h1>{article.title}</h1>
{article.content.map((paragraph, key) => (
<p key={key}>{paragraph}</p>
))}
<h3>Other Articles:</h3>
<ArticlesList articles={otherArticles} />
</>
);
}
export default ArticlePage;
ArticlesLists Js
import React from 'react';
import { Link } from 'react-router-dom';
const ArticlesList = ({ articles }) => (
<>
{articles.map((article, key) => (
<Link className="article-list-item" key={key} to={`/article/${article.name}`}>
<h3>{article.title}</h3>
<p>{article.content[0].substring(0, 150)}...</p>
</Link>
))}
</>
);
export default ArticlesList;
The match prop is undefined. For whatever reason this ArticlePage component isn't receiving a defined match prop.
Regardless of react-router-dom version (v5 or v6), since ArticlePage is a function component you have a useParams React hook available to you to access the currently matched Route's route path params.
ArticlePage
import { useParams } from 'react-router-dom';
const ArticlePage = () => {
const { name } = useParams();
const article = articleContent.find(article => article.name === name);
if (!article) return <NotFoundPage />;
const otherArticles = articleContent.filter(article => article.name !== name);
return (
<>
<h1>{article.title}</h1>
{article.content.map((paragraph, key) => (
<p key={key}>{paragraph}</p>
))}
<h3>Other Articles:</h3>
<ArticlesList articles={otherArticles} />
</>
);
};