1

I can't solve this problem, I can't render the HTML of my component that i call from a nested path like /page/detail

My route tree

render(
    (<Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Index}/>
            <Route path="page" component={Page}>
                <Route path="/page/detail" component={Detail} />
            </Route>
        </Route>
    </Router>),
    document.getElementById('main')
)

My {App} component renders this:

render() {
    return (
        <div>
            <nav className="navbar">
                <ul className="nav navbar-nav navbar-right">
                    <li><Link className="menu-link" ref="menu" to="/page">Page Test</Link></li>
                </ul>
            </nav>
            <div id="content-wrapper">{this.props.children}</div>
        </div>
    )
}

My route /page/detail is called from a Link inside the component {Page} but if i access to this link i see only what {Page} component renders. I've searched for some solution about nested routes with react-routers but i didn't find an answer.

UPDATE:

By this solution i've rendered my {Detail} component's html: I've inserted this within {Page} component

{this.props.children || <div>My Detail page</div> }

UPDATE 2

In my {Page} component I've inserted a jQuery plugin.

mix() {
    $("#filter-gallery").mixItUp();
}

destroy() {
    $('#filter-gallery').mixItUp('destroy');
}

componentDidMount() {
    this.mix();
}

componentWillUnmount() {
    this.destroy();
}

This plugin works only at {Page} refresh page, if i navigate to /page/detail and then come back to /page the plugin doesn't work.

Luca Mormile
  • 1,177
  • 6
  • 19
  • 36
  • 2
    that's basically the answer to your question. Every time you nesting some routes within your parent route, in order to show them you need to add `this.props.children` to your parent route component – knowbody Nov 11 '15 at 11:43
  • Yes, i did it right few minutes ago and it worked. But now all the javascript I've mounted inside this child component doesn't work – Luca Mormile Nov 11 '15 at 11:48
  • can you show this component as well? probably you're doing something wrong there – knowbody Nov 11 '15 at 11:49
  • also I didn't spot it in the first place your `Detail` component route's path should be just: `path='detail'` and that will match the URL: `/page/detail`, by doing what you did (`path='/page/detail'`) you define the absolute path – knowbody Nov 11 '15 at 11:53
  • Question updated. I've inserted what i do before `render()` – Luca Mormile Nov 11 '15 at 11:54
  • You should check the [Component Lifecycle](https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md) to better understand what happens when. – knowbody Nov 11 '15 at 11:56
  • I think I have to call this.destroy(); in someway before leave the page because, If I am not mistaken, the plugin has to be destroyed before call itself again, but I'm not so sure – Luca Mormile Nov 11 '15 at 12:39
  • then you could do it in `componentWillUnmount()` I'm not sure what your plugins are doing, so hard to help. It doesn't seem like an issue with react-router though – knowbody Nov 11 '15 at 13:46
  • I've already tried this, as you can see in my **Update 2**, unfortunately still no progress – Luca Mormile Nov 11 '15 at 14:00

1 Answers1

2

I've find a solution by setting routes in this way:

<Route path="studio" component={Studio} />
    <Route path="studio/detail" component={Calendar} />
Luca Mormile
  • 1,177
  • 6
  • 19
  • 36