Question

我正在构建一个React应用程序，其中我有一个显示不同内容的标签的页面，所以我的路由器看起来像这样：

<Route path="/" name="home" handler={App}>
    <DefaultRoute handler={Home}/>
    <Route path="tabs" handler={Tabs}>
        <Route path="tab1" name="tab1" handler={Tab1}/>
        <Route path="tab2" name="tab2" handler={Tab2}/>
    </Route>
</Route>

这会产生以下路线：

/
/tabs
/tabs/tab1
/tabs/tab2

我想保持相同的行为，但产生以下的行为（只有那些）：

/
/tab1
/tab2

知道怎么做到这一点吗？

Answer 1

这是一个jsfiddle，证明它有效。

<Route name="root" path="/" handler={App}>
    <DefaultRoute handler={Home} />
    <Route name="tabs" path="tab1" handler={Tabs}>
        <DefaultRoute name="tab1" handler={Tab1} />
        <Route name="tab2" path="/tab2" handler={Tab2} />
    </Route>
</Route>

在React Router中创建一个不可访问的父路由

1 个答案: