Fluxible router parameter a route

Question

I m actually developping an application using Fuxible and Reactjs and I m facing a problem.

In fact, I need to create a route in ./configs/routes.js that isn't in the top menu bar.

I need this route to be accessible with parameters like :id .

Here's a standard route that I use :

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

What I need is to make something like :

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

BUT without adding it to he top navbar menu (that is automagically generated by Fluxible)

Actually, the fact that I have :id in the url throw me a weird error like this one :

NavLink created without href or unresolvable routeName 'detail'

How can I proceed ?

score 1 · Answer 1 · answered Sep 11 '15 at 19:21

1

Fluxible doesn't control the navigation at all. The generator ships with a "Nav" component that by default uses the routes config to generate the navigation, but you are free to modify that component to do whatever you want. We generally like to keep the menu configuration separate from the routes config. For an example of this you can check out our Fluxible.io source code: https://github.com/yahoo/fluxible.io/blob/master/configs/menu.js

answered Sep 11 '15 at 19:21

Michael Ridgway

5,259
1
16
6

I have looked at what you have link, and I ve understood the fact that the top navigation bar is handled by the nav component. However, it doesn't helped me to make what I need work. – mfrachet Sep 12 '15 at 09:34

score 0 · Answer 2 · answered Jun 14 '16 at 22:19

For a quick fix, add an isSection property to each route and then filter the links in the Nav component.

//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>
            );
        }

Fluxible router parameter a route

2 Answers2