当我通过时，我有一个Json文件，其中包含博客
match: {
params: { date },
},
它正在失败它正在重定向到页面http://localhost:3000/blog-details/1，但在那之后，由于页面抛出意外错误，它将失去所有状态
我的文件是
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;
我的json文件是
[
{
"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>"
]
}
]
控制台中出现错误
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)
还有
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.
我该怎么办？
您似乎正在使用react-router-dom@6，因此不再有任何路由道具。换句话说，props.match是未定义的。读取props.match.params然后抛出错误。
使用useParams挂钩访问date路由参数。
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;