[英]ReactJS/ React-Router: How to filter nested array and objects based on url path parameters?
[英]ReactJS - react-router nested path not rendered
我无法解决此问题,无法渲染从nested path
例如/page/detail
调用的component
的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')
)
我的{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
是通过组件{Page}
内的Link
调用的,但是如果我访问此链接,我只会看到{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} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.