我解决不了这个问题，我无法呈现component通过nested path类似方式调用的HTML/page/detail
我的路线树
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')
)
我的{App}组件呈现了以下内容：
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>
)
}
我的路由/page/detail是从Link组件内部调用的，{Page}但是如果我访问此链接，我只会看到{Page}组件呈现的内容。我已经搜索了一些有关带有react-router的嵌套路由的解决方案，但没有找到答案。
更新：
通过此解决方案，我已经渲染了{Detail}组件的html：我已将其插入{Page}组件中
{this.props.children || <div>My Detail page</div> }
更新2
在我的{Page}组件中，我插入了一个jQuery插件。
mix() {
$("#filter-gallery").mixItUp();
}
destroy() {
$('#filter-gallery').mixItUp('destroy');
}
componentDidMount() {
this.mix();
}
componentWillUnmount() {
this.destroy();
}
如果我导航到/ page / detail，然后返回到/ page，则该插件仅在{Page}刷新页面上起作用，该插件不起作用。
我已经找到通过以下方式设置路由的解决方案：
<Route path="studio" component={Studio} />
<Route path="studio/detail" component={Calendar} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句