React Router 6：跨路由从Action向Loader传递状态以显示Toast

当然可以从/post/:id的Action向/post/list传递状态，以下是几种实用的实现方式：

方法1：通过搜索参数传递状态 #

这是最简单的方式，重定向时在URL后附加提示状态的查询参数，列表页读取后显示Toast，之后可清除参数避免重复触发。

修改Action函数： #

const postAction = async ({ request }: LoaderFunctionArgs) => {
    const formData = await request.formData()
    // 调用后端更新帖子等操作
    // 重定向时携带查询参数
    return redirect("/post/list?toast=post_updated")
}

帖子列表页组件处理： #

import { useSearchParams, useEffect } from "react-router-dom"

function PostList() {
    const [searchParams, setSearchParams] = useSearchParams()

    useEffect(() => {
        const toastType = searchParams.get("toast")
        if (toastType === "post_updated") {
            // 替换成你的Toast组件调用逻辑
            alert("您好，您的帖子已更新...")
            // 清除查询参数，避免刷新页面重复显示
            setSearchParams({}, { replace: true })
        }
    }, [searchParams, setSearchParams])

    // 帖子列表渲染逻辑...
}

方法2：通过会话存储（Session Storage）传递状态 #

适合不想在URL中暴露状态的场景，Action中写入会话存储，列表页读取后立即清除。

修改Action函数： #

const postAction = async ({ request }: LoaderFunctionArgs) => {
    const formData = await request.formData()
    // 调用后端更新帖子等操作
    // 写入会话存储
    sessionStorage.setItem("postToast", "您好，您的帖子已更新...")
    return redirect("/post/list")
}

帖子列表页组件处理： #

import { useEffect } from "react"

function PostList() {
    useEffect(() => {
        const toastMessage = sessionStorage.getItem("postToast")
        if (toastMessage) {
            // 替换成你的Toast组件调用逻辑
            alert(toastMessage)
            // 立即清除，避免刷新重复显示
            sessionStorage.removeItem("postToast")
        }
    }, [])

    // 帖子列表渲染逻辑...
}

方法3：通过React Router的重定向State传递 #

利用React Router的redirect方法附加state，列表页通过useLocation读取，状态存在内存中，刷新后消失，适合一次性临时提示。

修改Action函数： #

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

const postAction = async ({ request }: LoaderFunctionArgs) => {
    const formData = await request.formData()
    // 调用后端更新帖子等操作
    // 重定向时附加state
    return redirect({
        pathname: "/post/list",
        state: { toastMessage: "您好，您的帖子已更新..." }
    })
}

帖子列表页组件处理： #

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

function PostList() {
    const location = useLocation()

    useEffect(() => {
        const { toastMessage } = location.state || {}
        if (toastMessage) {
            // 替换成你的Toast组件调用逻辑
            alert(toastMessage)
            // 清除state避免回退时重复触发（可选）
            location.state = null
        }
    }, [location.state])

    // 帖子列表渲染逻辑...
}

方法4：通过Loader读取状态（针对你的核心需求） #

如果希望直接向/post/list的Loader传递信息，可以结合搜索参数，在Loader中读取状态并传递给组件：

列表页Loader函数： #

import { LoaderFunctionArgs, redirect } from "react-router-dom"

export const postListLoader = async ({ request }: LoaderFunctionArgs) => {
    const url = new URL(request.url)
    const toastType = url.searchParams.get("toast")
    let toastMessage = null

    if (toastType === "post_updated") {
        toastMessage = "您好，您的帖子已更新..."
        // 清除查询参数并重定向，避免URL残留状态
        return redirect({
            pathname: "/post/list",
            search: "",
            state: { toastMessage }
        })
    }

    // 加载帖子列表数据
    const posts = await fetchPosts()
    return { posts, toastMessage }
}

列表页组件通过useLoaderData获取： #

import { useLoaderData, useEffect } from "react-router-dom"

function PostList() {
    const { posts, toastMessage } = useLoaderData()

    useEffect(() => {
        if (toastMessage) {
            // 替换成你的Toast组件调用逻辑
            alert(toastMessage)
        }
    }, [toastMessage])

    // 帖子列表渲染逻辑...
}

以上几种方法均可实现需求，可根据场景选择：

• 搜索参数：简单直观，适合无需隐藏状态的场景
• 会话存储：不暴露URL，适合敏感或不想让用户感知的提示
• 重定向State：临时内存存储，刷新即失，适合一次性提示
• Loader传递：结合数据加载逻辑，适合需要在Loader阶段处理状态的场景

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