带有选项卡的 React-router，如何设置路由答案

【问题标题】：React-router with tabs, how to set up routes带有选项卡的 React-router，如何设置路由
【发布时间】：2016-09-08 01:44:45
【问题描述】：

我在我的应用程序的 AdministratorComponent 组件中设置了以下选项卡。我在路线上苦苦挣扎。我希望路由https://example.com/xyz/publish/create_news_item 转到下面的发布选项卡，并显示<CreateNewsItem /> 组件。 https://example.com/xyz/publish/index 应该转到下面的 Publish 选项卡，并显示 <PublishIndex /> 组件。

        <div className="container">

            <ul className="nav nav-tabs">
                <li className="active"><a data-toggle="tab" href="#menu1">Menu1</a></li>
                <li><a data-toggle="tab" href="#publish">Publish</a></li>
                <li><a data-toggle="tab" href="#analytics">Analytics</a></li>
            </ul>

            <div className="tab-content">
                <div id="menu1" className="tab-pane fade">
                  <h3>Menu 1</h3>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div id="publish" className="tab-pane fade">

                </div>
                <div id="analytics" className="tab-pane fade">
                  <Analytics />
                  </div>
            </div>
        </div>

        <div>
            {this.props.children}
        </div>
    </div>

以下是我目前的路线：

export default (
  <Route path=“/xyz/index" component={AdministratorComponent} >
    <Route path=“/xyz/create_news_publication" component={AdministratorComponent} />
  </Route>

);

这不起作用。我想也许我会将代码放入 AdministratorComponent 中，该组件将查看 window.location.href，激活“发布”选项卡，然后根据路径输入 <PublishIndex /> 或 <CreateNewsItem />。但我无法开始，因为 url 中的上述路径只会导致一堆 404。这样做的正确方法是什么？

【问题讨论】：

您可以使用路由器参数来检查 /xyz/:param 后面的内容，或者像这样定义路由

标签： reactjs tabs routes react-router

【解决方案1】：

<Route path="/">
    <Route path="/index" component={AdministratorComponent}/>
    <Route path="/create_news_publication" component={AdministratorComponent}/>
</Route>

以routes.js 为例。组件Route来自react-router

要切换路由，您需要使用Link 中的组件react-router

要让一个文本（例如）链接到另一个页面，应该是这样的：

<Link to={`/create_news_publication`}>click to go to create_news_publication!</Link>

【讨论】：