reactjs - 是否可以使用非嵌套路由

时间:2015-07-16 22:39:21

标签: reactjs react-router

我正在玩reactjs路线。在所有示例中,路由始终是嵌套的,例如

<Route path="/" handler={App} >
    <Route name="about" handler={About} />
    <Route name="contact" handler={Contact} />
</Route> 

是否可以使用简单的非嵌套路由,如下所示?

 <Route path="/" handler={App} />
 <Route name="about" handler={About} />
 <Route name="contact" handler={Contact} />

更新

var routes = (
    <Route name="root" handler={Root}>
        <Route path="/" handler={Home} />
        <Route path="/home" handler={Home} />
        <Route path="/about" handler={About} />
        <Route path="/projects" handler={Projects} />
        <Route path="/contact" handler={Contact} />
    </Route> 
);

奇怪的问题,按照下面的答案建议更新后。 name仅在path工作不再有效?我不得不更新我的路线。任何的想法?

1 个答案:

答案 0 :(得分:1)

似乎不可能。但是我使用技巧来模仿这种行为:

var Routes = (
    <Route name="root" handler={Root}>
        <Route name="checkout" path="/checkout/:step" handler={Checkout}/>
        <Route name="application" path="/" handler={Application}>
            <DefaultRoute handler={Promo}/>
            <Route name="agreement" handler={Agreement}/>
            <Route name="policy" handler={Policy}/>
            <Route name="how-it-works" handler={Brief}/>
            <Route name="login" handler={Login}/>
            <Route name="faq" handler={Faq}/>
            ...
            <NotFoundRoute handler={NotFound}/>
        </Route>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Root只是一个带有body标签的基本html页面,其内容由路由处理程序呈现。

在这里,我需要一个具有不同页面布局但在与协议或登录页面相同的路径段级别的结帐页面。