React使用react-router-dom时useLocation接收的state一直为null怎么办

问题根因 #

你使用的是react-router-dom v6版本，参考的教程为v5版本，两个版本通过Link组件传递state参数的语法存在差异，v5支持将state嵌套在to属性的对象中，v6已经废弃该写法。

修正方案 #

修改Accueil.js中的Link组件写法，将state作为独立属性传入：

import React from 'react'
import { Link } from 'react-router-dom'

export default function Accueil() {
    return (
        <>
          <h1>Bienvenue ACCUEIL</h1>  
          <Link
            to="/Contact"
            state={{
              txt: "je mange des poissons"
            }}
          > 
            Aller à la section Contact 
          </Link>
        </>
    )
}

注意事项 #

• 只有通过携带了state参数的Link/NavLink组件跳转时，useLocation才能拿到对应值。如果直接在地址栏输入/Contact路径访问，或者点击导航栏中未携带state的NavLink跳转，state默认返回null，属于正常现象。
• 如果需要从导航栏跳转也携带state，给Nav.js中对应Contact的NavLink加上同样的state属性即可：

<NavLink to="/Contact" state={{ txt: "je mange des poissons" }}>
    <li>Contact</li>
</NavLink>

内容的提问来源于stack exchange，提问作者HibouxDev