Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
149
rated 0 times [  150] [ 1]  / answers: 1 / hits: 6050  / 2 Years ago, thu, february 24, 2022, 12:00:00

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;

More From » reactjs

 Answers
0

Issue


The match prop is undefined. For whatever reason this ArticlePage component isn't receiving a defined match prop.


Solution


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} />
</>
);
};

[#324] Friday, February 18, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
marcos

Total Points: 331
Total Questions: 106
Total Answers: 104

Location: Gabon
Member since Sat, Jul 25, 2020
4 Years ago
marcos questions
Sat, Apr 17, 21, 00:00, 3 Years ago
Mon, Feb 1, 21, 00:00, 3 Years ago
Tue, Jan 26, 21, 00:00, 3 Years ago
Wed, Jan 6, 21, 00:00, 3 Years ago
Tue, May 26, 20, 00:00, 4 Years ago
;