ReactJS-未呈现react路由器嵌套路径
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路由器的嵌套路由的解决方案,但没有找到答案。
更新:
通过这个解决方案,我已经呈现了{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}刷新页面时工作,如果我导航到/Page/detail,然后返回到/Page,插件就不工作了。
我通过以下方式设置路由找到了解决方案:
<Route path="studio" component={Studio} />
<Route path="studio/detail" component={Calendar} />
相关文章:
- angularjs中带有ui路由器的嵌套视图
- 带有嵌套状态的Angular ui路由器和后退按钮
- 如何加载嵌套3个状态的UI路由器UI视图模板
- Ui路由器未显示嵌套的子内容
- 状态更改期间角度UI路由器中的嵌套视图滞后
- Angular 1.3+ui路由器+生成器ng poly嵌入嵌套(?)视图不起作用
- 角度 UI 路由器嵌套视图不起作用
- 角度 UI 路由器嵌套视图 使用或刷新直接 URL 时不会加载页面
- 角度 Js UI 路由器嵌套视图
- UI 路由器嵌套视图不会呈现(无错误)
- Ui路由器-嵌套视图未显示($viewContentLoaded未激发)
- 有角度的路由器嵌套状态不继承自定义数据
- ReactJS-未呈现react路由器嵌套路径
- UI 路由器 - 嵌套视图具有双斜杠并重定向到根目录
- Angular UI路由器嵌套视图
- ui.路由器嵌套视图继承父窗体
- Angular ui -路由器嵌套视图不显示页面
- 单元测试UI路由器嵌套状态
- 如果子控制器处于相同状态,则angular ui路由器-嵌套控制器-父控制器将启动两次
- AngularJS:UI-路由器(嵌套视图)和引导选项卡不能很好地播放