React Router中如何在Home与ListScreen组件间传递API数据？

下面提供几种实用的实现方案，结合你的代码进行修改：

方案一：通过navigate的state参数传递数据 #

这是React Router中组件跳转传值的常用方式，适合一次性传递数据的场景。

修改Home组件的SubmitHandler #

在API请求成功后，将返回的response.data通过navigate的第二个参数传递：

const SubmitHandler = (event) => {
    event.preventDefault()

    if(login.login_email.length < 1 || login.login_pwd.length < 4) {
        set_error(true)
    } else {
        axios.get(`https://localhost:7281/${login.login_email}/${login.login_pwd}`)
        .then(response => {
            console.log(response.status)

            if(response.status == 200) {
                // 传递API返回的数据到ListScreen
                navigate('/todo-list', {
                    state: { userData: response.data }
                })
            }
        })
    }
}

ListScreen组件接收数据 #

使用useLocation钩子获取传递过来的state数据：

import { useLocation } from "react-router-dom"

function ListScreen() {
    const location = useLocation()
    // 获取传递的用户数据，可选链避免未定义报错
    const userData = location.state?.userData

    // 后续基于userData进行查询操作
    return (
        <div>
            {userData && <div>当前用户数据：{JSON.stringify(userData)}</div>}
        </div>
    )
}

export default ListScreen

方案二：使用React Context全局管理数据 #

如果后续多个组件都需要用到该数据，推荐用Context做全局状态管理。

创建UserContext #

// context/UserContext.js
import { createContext, useContext, useState } from "react"

const UserContext = createContext()

export function UserProvider({ children }) {
    const [userData, setUserData] = useState(null)

    return (
        <UserContext.Provider value={{ userData, setUserData }}>
            {children}
        </UserContext.Provider>
    )
}

export function useUser() {
    return useContext(UserContext)
}

在根组件中包裹UserProvider #

确保路由组件被UserProvider包裹：

// App.jsx
import { UserProvider } from './context/UserContext'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import ListScreen from './ListScreen'

function App() {
    return (
        <UserProvider>
            <Router>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/todo-list" element={<ListScreen />} />
                </Routes>
            </Router>
        </UserProvider>
    )
}

修改Home组件存储数据 #

// Home.jsx
import { useUser } from './context/UserContext'

function Home() {
    const { setUserData } = useUser()
    // ...其他代码不变

    const SubmitHandler = (event) => {
        event.preventDefault()

        if(login.login_email.length < 1 || login.login_pwd.length < 4) {
            set_error(true)
        } else {
            axios.get(`https://localhost:7281/${login.login_email}/${login.login_pwd}`)
            .then(response => {
                console.log(response.status)

                if(response.status == 200) {
                    // 将数据存入Context
                    setUserData(response.data)
                    navigate('/todo-list')
                }
            })
        }
    }

    // ...返回部分不变
}

ListScreen组件获取数据 #

// ListScreen.jsx
import { useUser } from './context/UserContext'

function ListScreen() {
    const { userData } = useUser()

    // 后续基于userData进行查询操作
    return (
        <div>
            {userData && <div>当前用户数据：{JSON.stringify(userData)}</div>}
        </div>
    )
}

方案三：使用localStorage持久化存储数据 #

如果需要页面刷新后数据不丢失，可以将数据存入localStorage：

修改Home组件的SubmitHandler #

const SubmitHandler = (event) => {
    event.preventDefault()

    if(login.login_email.length < 1 || login.login_pwd.length < 4) {
        set_error(true)
    } else {
        axios.get(`https://localhost:7281/${login.login_email}/${login.login_pwd}`)
        .then(response => {
            console.log(response.status)

            if(response.status == 200) {
                // 将数据存入localStorage
                localStorage.setItem('userData', JSON.stringify(response.data))
                navigate('/todo-list')
            }
        })
    }
}

ListScreen组件读取数据 #

import { useEffect, useState } from "react"

function ListScreen() {
    const [userData, setUserData] = useState(null)

    useEffect(() => {
        // 从localStorage读取数据
        const storedData = localStorage.getItem('userData')
        if(storedData) {
            setUserData(JSON.parse(storedData))
        }
    }, [])

    // 后续基于userData进行查询操作
    return (
        <div>
            {userData && <div>当前用户数据：{JSON.stringify(userData)}</div>}
        </div>
    )
}

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