CODEWITHSUNDEEP
javascriptreactjsfluxible
mfrachet
mfrachet

Reputation: 8922

Fluxible router parameter a route

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 ?

Upvotes: 1

Views: 416

Answers (2)

tmt
tmt

Reputation: 26

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

Upvotes: 0

Michael Ridgway
Michael Ridgway

Reputation: 5299

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

Upvotes: 1

Related Questions