Question

我无法解决此问题，我无法呈现我从component调用的nested path /page/detail的HTML 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') )

我的路线树

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

我的{App}组件呈现：

/page/detail

我的路由Link是从组件{Page}内的{this.props.children || <div>My Detail page</div> }调用的，但是如果我访问此链接，我只会看到{Page}组件呈现的内容。我已经搜索了有关使用react-routers的嵌套路由的一些解决方案，但我找不到答案。

更新

通过这个解决方案，我已经呈现了我的{Detail}组件的html：我在{Page}组件

中插入了它

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

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

componentDidMount() {
    this.mix();
}

componentWillUnmount() {
    this.destroy();
}

更新2

在我的{Page}组件中，我插入了一个jQuery plugin。

{{1}}

此插件仅适用于{Page}刷新页面，如果我导航到/ page / detail然后返回/页面插件不起作用。

Answer 1

我通过这种方式设置路线找到了解决方案：

<Route path="studio" component={Studio} />
    <Route path="studio/detail" component={Calendar} />

ReactJS - 不呈现react-router嵌套路径

1 个答案: