问Uncaught :无法读取空属性(读取“标题”)-- React路由器

EN

import React from 'react';
import {useLocation} from 'react-router-dom';
import './Article.css';

export default function Article() 
{

  const location = useLocation()
  console.log(location);

  return (
    <div className='article-content'>
      <h2>Votre article: {location.state.title}</h2>
      <p>{location.state.body}</p>
    </div>
  )
}

import React from 'react';
import './Home.css';
import Card from '../../Components/Card/Card';
import {useSelector, useDispatch} from 'react-redux';
import {useEffect, useState} from 'react';
import {getArticles} from '../../redux/articles/articleReducer';
import {v4 as uuidv4} from 'uuid';
import {Link} from 'react-router-dom';

export default function Home() 
{
  const {articles} = useSelector(state => (
  {
    ...state.articleReducer
  }));

  const dispatch = useDispatch();

  useEffect(() => 
  {
    if (articles.length === 0) 
    {
      dispatch(getArticles());

    }
  }, [])

  return (
    <>
      <h1 className='home-title'>Tous les articles</h1>
      <div className="container-cards">     
        {articles.map(item => 
        {
          console.log(item.title);
          console.log(item.body);
          return(
            <Card key={uuidv4()}>
              <h2>{item.title}</h2>
              <Link to={{
                  pathname: `articles/${item.title
                    .replace(/\s+/g, '-')
                    .trim()}`,
                  state: {
                    title: item.title,
                    body: item.body,
                  },
                }}
              >
                Lire l'article
              </Link>
            </Card>   
          );
        })}
      </div>
    </>
  )
}