Question

我实际上正在使用Fuxible和Reactjs开发应用程序，我遇到了问题。

事实上，我需要在./configs/routes.js中创建一个不在顶部菜单栏中的路线。

我需要使用以下参数访问此路由：id。

这是我使用的标准路线：

detail: {
        path: '/product/1/details',
        method: 'get',
        page: 'productDetail',
        title: 'product detail',
        handler: require('../components/product/ProductDetail')
    }

我需要做的是：

detail: {
            path: '/product/:id/details',
            method: 'get',
            page: 'productDetail',
            title: 'product detail',
            handler: require('../components/product/ProductDetail')
        }

但不将其添加到顶部导航栏菜单（由Fluxible自动生成）

实际上，我在url中的id：id会给我一个奇怪的错误，比如这个：

创建的NavLink没有href或无法解析的routeName＆＃39; detail＆＃39;

我该怎么办？

Answer 1

Fluxible根本不控制导航。生成器附带一个“Nav”组件，默认情况下使用路由配置来生成导航，但您可以自由地修改该组件以执行任何操作。我们通常喜欢将菜单配置与路由配置分开。有关此示例，您可以查看我们的Fluxible.io源代码：https://github.com/yahoo/fluxible.io/blob/master/configs/menu.js

Answer 2

要进行快速修复，请为每个路径添加isSection属性，然后过滤导航组件中的链接。

//configs/routes.js
about: {
    path: '/about',
    method: 'get',
    page: 'about',
    title: 'About',
    handler: require('../components/About'),
    isSection: true
},
play: {
    path: '/play/:id',
    method: 'get',
    page: 'play',
    title: 'Play',
    handler: require('../components/About'),
    isSection: false
}

//components/Nav.js
if (link.isSection){
            if (selected && selected.name === name) {
                className = 'pure-menu-selected';
            }
            return (
                <li className={className} key={link.path}>
                    <NavLink routeName={link.page} activeStyle={{backgroundColor: '#eee'}}>{link.title}</NavLink>
                </li>
            );
        }

灵活的路由器参数路由

2 个答案: