以上错误发生在<ArticlePage>组件

Question

我正在使用 ReactJs 制作文章页面一切都很好但是我在单击一篇文章时遇到错误它没有显示在屏幕上检查时出现错误未捕获的类型错误：无法读取未定义的属性（读取 'params'）组件出现以上错误：

文章页面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;

文章列表 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;

Answer 1

问题

match 属性未定义。无论出于何种原因，此 ArticlePage 组件未收到定义的 match prop.

解决方案

无论 react-router-dom 版本（v5 或 v6）如何，由于 ArticlePage 是一个函数组件，您可以使用 useParams React 挂钩来访问当前匹配的 Route的路由路径参数。

react-router-dom@5 useParams
react-router-dom@6 useParams

文章页数

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

以上错误发生在<ArticlePage>组件

The above error occurred in the <ArticlePage> component

javascript

reactjs

react-router

react-router-dom

问题

解决方案