[英]React router v6
Hello when I try to get data from a file.您好,当我尝试从文件中获取数据时。 The react app goes blank.
反应应用程序变为空白。 Here is what I have:
这是我所拥有的:
import React from 'react';
import {Link, useParams} from "react-router-dom";
import articles from "./article-content";
const ArticlePage = () =>{
const { name } = useParams();
const { article } = articles.find(article => article.name === name)
return(
<>
<div id="page-body">
<h1>{article.title}</h1>
<h1>{article.content}</h1>
</div>
</>
);
}
export default ArticlePage;
and here is example of the article-content:这是文章内容的示例:
const articles = [
{
name: 'learn-react',
title: 'The Fastest Way to Learn React',
content: [.....
]]
export default articles;
Any ideas why it's going blank instead of rendering?任何想法为什么它会变成空白而不是渲染?
You can use the Chrome's console to have a clue of what is happening with your app.您可以使用 Chrome 的控制台来了解您的应用程序发生了什么。 Press F12 or right click on your Chrome and open the Inspector, and then go to the "Console" tab.
按 F12 或右键单击您的 Chrome 并打开检查器,然后 go 到“控制台”选项卡。 It will be your best tool for debugging your apps.
它将是您调试应用程序的最佳工具。
Please change the below lines from const { name } = useParams();请从 const { name } = useParams(); 更改以下行const { article } = articles.find(article => article.name === name)
const { 文章 } =articles.find(article => article.name === name)
to const name = useParams();到常量名称 = useParams(); const article = articles.find(article => article.name === name)
常量文章 = 文章.find(文章 => 文章名称 === 名称)
you cannot able to destructure it.你无法解构它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.