ReactJS - 未呈现反应路由器嵌套路径 [英] ReactJS - react-router nested path not rendered
问题描述
我无法解决这个问题,我无法渲染我从 nested path
调用的 component
的 HTML,例如 /page/detail
我的路线树
render((<路由器历史={历史}><Route path="/" component={App}><IndexRoute 组件={Index}/><Route path="page" component={Page}><Route path="/page/detail" component={Detail}/></路线></路线></路由器>),document.getElementById('main'))
我的 {App} 组件呈现这个:
render() {返回 (<div><nav className="导航栏"><ul className="nav navbar-nav navbar-right"><li><Link className="menu-link" ref="menu" to="/page">页面测试</Link></li></nav><div id="content-wrapper">{this.props.children}</div>
)}
我的路线 /page/detail
是从 {Page}
组件内的 Link
调用的,但如果我访问此链接,我会看到只有 {Page} 组件呈现的内容.我已经用 react-routers 搜索了一些关于嵌套路由的解决方案,但我没有找到答案.
更新:
通过这个解决方案,我已经呈现了我的 {Detail} 组件的 html:我已将其插入到 {Page} 组件
{this.props.children ||<div>我的详细信息页面</div>}
更新 2
在我的 {Page} 组件中,我插入了一个 jQuery 插件.
mix() {$("#filter-gallery").mixItUp();}破坏() {$('#filter-gallery').mixItUp('destroy');}componentDidMount() {this.mix();}componentWillUnmount() {this.destroy();}
此插件仅适用于 {Page} 刷新页面,如果我导航到/page/detail 然后返回/page 插件不起作用.
我找到了一个解决方案,通过这种方式设置路由:
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.
I've find a solution by setting routes in this way:
<Route path="studio" component={Studio} />
<Route path="studio/detail" component={Calendar} />
这篇关于ReactJS - 未呈现反应路由器嵌套路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!