React通过URL路由访问组件时如何将state从一个组件传递到另一个组件

解决方案 #

方案1：用React Router跳转携带状态（改造成本最低，无需调整现有路由结构）

你之前的写法不生效核心是两个问题：

1. 用原生<a>标签跳转相当于刷新整页，组件内部状态会直接丢失
2. 额外在ComponentOne里嵌套Router会导致两个路由实例独立不互通，状态自然传不过去

按照以下步骤修改即可：

1. 修改ComponentOne代码
   先从react-router-dom导入Link组件，替换原有<a>标签，跳转时把要传递的JSON数据放到state字段里：

   import {useState, useEffect} from "react";
   import { Link } from "react-router-dom";
   // 注意：React组件名必须大驼峰，要把componentOne改成ComponentOne，否则会被识别为原生标签
   function ComponentOne() {
       const [stateOne, setStateOne] = useState(null)
       const [stateTwo, setStateTwo] = useState(null)
       const [stateThree, setStateThree] = useState(null)
   
       /**
        * API call that populates stateOne, stateTwo and stateThree
        */
   
       return (
           <div>
               {/* 传stateOne */}
               <Link to={{
                 pathname: "/componentTwo",
                 state: { passData: stateOne }
               }}>
                   <img src = {stateOne?.image} alt=""/>
               </Link>
   
               {/* 传stateTwo */}
               <Link to={{
                 pathname: "/componentTwo",
                 state: { passData: stateTwo }
               }}>
                   <img src = {stateTwo?.image} alt=""/>
               </Link>
   
               {/* 传stateThree */}
               <Link to={{
                 pathname: "/componentTwo",
                 state: { passData: stateThree }
               }}>
                   <img src = {stateThree?.image} alt=""/>
               </Link>
   
           </div>
       )
   }
   
   export default ComponentOne
   

2. 修改ComponentTwo代码
   导入useLocation钩子获取跳转携带的状态：

   import { useLocation } from "react-router-dom";
   // 同样组件名改大驼峰为ComponentTwo
   function ComponentTwo() {
       const location = useLocation()
       // 这里拿到的就是你传递的JSON数据
       const receivedData = location.state?.passData
   
       return(
           <text> {receivedData?.title} </text>
       )
   }
   
   export default ComponentTwo
   

方案2：状态提升到App组件（适合数据需要多页面复用的场景）

如果后续你多个页面都要用到这几个状态，可以把状态定义移到父组件App里，再通过props分别传给子组件：

import { useState, useEffect } from "react"
import ComponentOne from "./ComponentOne"
import ComponentTwo from "./ComponentTwo"

function App() {
    const [stateOne, setStateOne] = useState(null)
    const [stateTwo, setStateTwo] = useState(null)
    const [stateThree, setStateThree] = useState(null)

    // 原来在ComponentOne里的API请求移到这里执行

    return (
        <div>
            <Router>
                <Switch>
                    <Route path = "/componentOne">
                        <ComponentOne 
                          stateOne={stateOne} 
                          stateTwo={stateTwo} 
                          stateThree={stateThree}
                        />
                    </Route>
                    <Route path = "/componentTwo">
                        {/* 可以配合路由参数区分要传哪个状态 */}
                        <ComponentTwo />
                    </Route>
                </Switch>
            </Router>
        </div>
    )
}

export default App

注意事项 #

• React组件命名必须用大驼峰，首字母大写，否则会被识别为普通HTML标签，引发未知错误
• 单页应用内跳转不要用原生a标签，要用React Router提供的Link或者useNavigate，避免整页刷新丢失状态

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