Question

如何使用fluxible-router

访问动态navParams

例如，如果我有一个用户组件，并且我想根据路径设置组件的userId prop

// 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组件中访问该userId？

Answer 1

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

每个路由器调用都包含一个Payload参数：

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（）函数。我花了很长时间才找到它，因为在文档中没有强调它。

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

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

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

1 个答案: