如何为React Router 6.4+ Route传递动态自定义Props

问题分析 #

你原代码里的createBrowserRouter是在App组件外部定义的，这里无法访问组件内部的animate状态，直接传递会导致状态无法被读取或响应更新。

解决方案 #

将路由配置的创建逻辑移到App组件内部，这样就能直接访问组件内的状态，再传递给路由组件：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { useState } from 'react';
import Profile from './Profile';

export function App() {
    const [animate, setAnimate] = useState(true);
    
    // 在组件内部创建路由，此时可直接访问animate状态
    const router = createBrowserRouter([
        { 
            path: '/', 
            element: <Profile animate={animate} /> 
        }
    ]);

    return <RouterProvider router={router} />;
}

复杂路由场景优化 #

如果路由配置较多，不想全部写在App组件内，可以把路由封装成接收参数的函数，在组件内调用生成路由：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { useState } from 'react';
import Profile from './Profile';

// 封装路由配置函数，接收需要传递的props
function generateRoutes(animate) {
    return [
        { 
            path: '/', 
            element: <Profile animate={animate} /> 
        },
        // 其他路由配置...
    ];
}

export function App() {
    const [animate, setAnimate] = useState(true);
    const router = createBrowserRouter(generateRoutes(animate));

    return <RouterProvider router={router} />;
}

当animate状态更新时，路由会重新生成，Profile组件也会同步接收到最新的props。

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