Estoy creando una página de artículo usando ReactJs. Todo está bien, pero me encuentro con errores mientras hago clic en un artículo. No se muestra en la pantalla mientras inspecciono. Los errores aparecen como no detectados. ocurrió un error en el componente:
Artículo Página 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;ArtículosListas 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; El apoyo del match no está definido. Por alguna razón, este componente ArticlePage no recibe una propiedad de match definida.
Independientemente de la versión de react-router-dom (v5 o v6), dado que ArticlePage es un componente de función, tiene un gancho useParams React disponible para acceder a los parámetros de ruta de ruta de la Route coincidente actualmente.
ArtículoPágina
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} /> </> ); };