如何使用 fluxible-router 处理动态路由参数

Question

如何使用 fluxible-router 访问动态 navParams

例如，如果我有一个用户组件，我想根据路由设置该组件的 userId 属性

// configs/routes.js
module.exports = {
    home: {
        method: 'GET',
        path: '/',
        handler: require('../components/Home.jsx'),
        // Executed on route match
        action: require('../actions/loadHome')
    },
    user: {
        method: 'GET',
        path: '/user/:id',
        handler: require('../components/User.jsx')
    }
};

https://github.com/yahoo/fluxible-router/blob/master/docs/quick-start.md

如何在 User.jsx 组件中访问该用户 ID？

Answer 1

我假设您在这里使用的是 fluxible-router，生成的应用程序通常会这样做。

每个路由器调用都包含一个有效负载参数：

module.exports = {
    user: {
        method: 'GET',
        path: '/user/:id',
        handler: require('../components/Home.jsx'),
        action: function(context, payload, done) {
            console.log( payload.toJS() );
            context.executeAction(registerCollector, payload, done);
            done();
        }
    }
};

有关此参数创建位置的更多信息，请参见 the docs。但是该参数包含所有 URL 参数作为 JSON 对象。

要访问它们，您必须使用 payload.toJS() 函数。我花了很长时间才找到，因为它没有在文档中强调。

要在组件中直接访问它们，请使用 handleRoute API。

这应该可以解决您的问题。

如何使用 fluxible-router 处理动态路由参数

How to handle dynamic route params using the fluxible-router

fluxible