Question

我在应用的AdministratorComponent组件中设置了以下标签。我正在努力寻找路线。我希望路线https://example.com/xyz/publish/create_news_item转到下方的“发布”标签，然后显示<CreateNewsItem />组件。 https://example.com/xyz/publish/index应转到下方的“发布”标签，并显示<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，激活Publish选项卡，并根据路径输入<PublishIndex />或<CreateNewsItem />。但我无法开始，因为url中的上述路径只会导致一堆404。这样做的正确方法是什么？

Answer 1

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

将以routes.js为例。组件路由来自react-router

要切换路线，您需要使用Link

中的组件react-router

要有一个文本（例如）链接到另一个页面，它将是这样的：

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

具有选项卡的React-router，如何设置路由

1 个答案: