1

私はこの問題を解決できません。いいねcomponentから呼び出す自分の HTML をレンダリングできませnested pathん。/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から呼び出されますが、このリンクにアクセスすると、 {Page} コンポーネントがレンダリングするものだけが表示されます。反応ルーターを使用してネストされたルートに関するいくつかの解決策を検索しましたが、答えが見つかりませんでした。Link{Page}

アップデート：

このソリューションによって、{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 に戻ると、プラグインは機能しません。

4

1 に答える 1

2

この方法でルートを設定することで解決策を見つけました：

<Route path="studio" component={Studio} />
    <Route path="studio/detail" component={Calendar} />
于 2015-11-13T10:26:52.667 に答える