ReactJS-未呈现react路由器嵌套路径

ReactJS - react-router nested path not rendered

本文关键字:路由器 嵌套 路径 react ReactJS-      更新时间:2023-09-26

我无法解决这个问题,我无法呈现我从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} />