I have a Json File which contains blog, when I am passing
match: {
params: { date },
},
it is failing it is redirecting to the page http://localhost:3000/blog-details/1 but after that it is loosing all the states as the page is throwing unexpected error
My File is
import React from "react";
import PropTypes from "prop-types";
import NewsletterArea from "../containers/global/newsletter";
import PageBanner from "../containers/global/page-banner";
import Footer from "../layouts/footer";
import Header from "../layouts/header";
import Layout from "../layouts/index";
import BlogData from "../data/blog.json";
import BlogItemContainer from "../containers/blog/blog-item";
import { slugify } from "../utils";
import ScrollToTop from "../components/scroll-to-top";
import SEO from "../components/seo";
const BlogDate = ({
match: {
params: { date },
},
}) => {
const data = BlogData.filter((blog) => slugify(blog.date) === date);
const dateTitle = data[0].date;
return (
<React.Fragment>
<Layout>
<SEO title="Nise-Comport – Blog Date" />
<div className="wrapper">
<Header />
<PageBanner
title={dateTitle}
excerpt="Pleasure rationally encounter consequences <br />
are extremely painful great oppurtunity"
image="/images/blog/banner.png"
/>
<BlogItemContainer data={data} />
<NewsletterArea />
<Footer />
<ScrollToTop />
</div>
</Layout>
</React.Fragment>
);
};
BlogDate.propTypes = {
match: PropTypes.shape({
params: PropTypes.shape({
date: PropTypes.string,
}),
}),
};
export default BlogDate;
My json file is
[
{
"id": 1,
"media": {
"rcImage": "./images/blog/post/aadhaar-post.png",
"gridImage": "./images/blog/aadhaar.png",
"largeImage": "./images/blog-details/aadhaar-banner.png"
},
"title": "Aadhaar Demographic Update",
"author": "Shubham",
"date": "1 January, 2021",
"categories": ["Service"],
"tags": [
"Aadhaar",
"Demographic Update",
"CSC",
"Pragya Kendra",
"Digital Seva",
"Telco",
"India",
"NISE-COMPORT",
"NISE"
],
"body": [
"<p class='pb-2'>We have happy to share that we have started Aadhaar Demographic update service<br class='d-none d-xl-block' /> We currently provide the following mentioned service below </p>",
"<div class='blog-details-list'><p><i class='fa fa-angle-double-right'></i>Mobile Update / Correction</p><p><i class='fa fa-angle-double-right'></i>Email Id Update / Correction</p><p><i class='fa fa-angle-double-right'></i>Name Update / Correction</p><p><i class='fa fa-angle-double-right'></i>Address Update / Correction</p><p><i class='fa fa-angle-double-right'></i>DOB Update / Correction</p></div>",
"<div class='blog-qutation'><p>Aadhaar - AAM ADMI KA ADHIKAR </p><i class='icofont-quote-right'>UIDAI</i></div>",
"<div class='blog-details-grid'><div class='row mb-n7'><div class='col mb-7'><p>To avail this service , user / candidate need to take an prior appointment as per Covid guideline, and shall maintain safety regulation at the premises. Note: Kindly provide the Original document as well as prescribed documentation as per provide by UIDAI Guideline. </p></div><div class='col mb-7 text-end'><img class='d-block mx-auto mx-lg-0' src='/images/blog-details/2.png' alt='img' /></div></p></div></div></div>"
]
},
{
"id": 2,
"media": {
"rcImage": "./images/blog/post/2.png",
"gridImage": "images/blog/pan.png",
"largeImage": "./images/blog-details/pan-banner.png"
},
"title": "Pan Card Service",
"author": "Sanjay Kumar",
"date": "20 September, 2018",
"categories": ["Service"],
"tags": [
"CSC",
"Pragya Kendra",
"Digital Seva",
"Telco",
"India",
"NISE-COMPORT",
"NISE",
"PAN",
"NSDL",
"UTI"
],
"body": [
"<p class='pb-2'>We provide Pan service, where user can either apply for new / correction / lost. <br class='d-none d-xl-block' /> we work with major Pan authorised company which is tied up with CSC </p>",
"<div class='blog-details-list'><p><i class='fa fa-angle-double-right'></i>UTI</p><p><i class='fa fa-angle-double-right'></i>NSDL</p></div>",
"<div class='blog-qutation'><p>BUILDING A GOOD CUSTOMER EXPERIENCE DOES NOT HAPPEN BY ACCIDENT. IT HAPPENS BY DESIGN</p><i class='icofont-quote-right'>Anonymous</i></div>",
"<div class='blog-details-grid'><div class='row mb-n7'><div class='col mb-7'><p>For applying Pan card, user need to visit the center (If applying in Physical mode) and provide a copy of Aadhaar & two Passport size photos, for correction additional Pan card copy is required with the correcting details.<br> Do provide the correct details ,if there is any Incorrect data or document is provided. User/Applicant has to bear the charges. </p></div><div class='col mb-7 text-end'><img class='d-block mx-auto mx-lg-0' src='/images/blog-details/2.png' alt='img' /></div><div class='col-12 mb-7'><p class='pt-2>Pleasure rationally encounter consequences that are extremely painful. Nor again there who loves or pursues or desires to obtain voluptas sit aspernatur aut odit aut fugit, sed consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p></div></div></div>"
]
}
]
Getting error in Console
blog-details.js:13 Uncaught TypeError: Cannot read properties of undefined (reading 'params')
at BlogDetailsPage (blog-details.js:13:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
also
react-dom.development.js:20085 The above error occurred in the <BlogDetailsPage> component:
at BlogDetailsPage (http://localhost:3000/static/js/bundle.js:14148:7)
at Routes (http://localhost:3000/static/js/bundle.js:60259:5)
at NavScrollTop (http://localhost:3000/static/js/bundle.js:3961:51)
at Wrapper (http://localhost:3000/static/js/bundle.js:4035:78)
at Router (http://localhost:3000/static/js/bundle.js:60192:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:59668:5)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
what should I do ?
CodePudding user response：
It appears you are using react-router-dom@6 so there are no longer any route props. In other words, props.match is undefined. Reading into props.match.params then throws the error.
Use the useParams hook to access the date route param.
import { useParams } from 'react-router-dom';
const BlogDate = () => {
const { date } = useParams();
const data = BlogData.filter((blog) => slugify(blog.date) === date);
const dateTitle = data[0].date;
return (
<React.Fragment>
<Layout>
<SEO title="Nise-Comport – Blog Date" />
<div className="wrapper">
<Header />
<PageBanner
title={dateTitle}
excerpt="Pleasure rationally encounter consequences <br />
are extremely painful great oppurtunity"
image="/images/blog/banner.png"
/>
<BlogItemContainer data={data} />
<NewsletterArea />
<Footer />
<ScrollToTop />
</div>
</Layout>
</React.Fragment>
);
};
export default BlogDate;