有没有一种方法可以使用react-router来模块化你的路由,然后导入它们并组装它们?
所以代替这个:
<Router>
<Route path="/" component={App}>
<Route path="inbox" component={Inbox}>
<Route path="messages/" component={AllMessages} />
<Route path="messages/:id" component={Message} />
</Route>
<Route path="calendar" component={Calendar}>
<Route path="year" component={Year}>
<Route path="month" component={Month}>
<Route path="week" component={Week}/>
</Route>
</Route>
</Route>
</Route>
</Router>
你可以这样做:
let InboxRoutes = React.createClass({
render: function(){
return (
<Route path="inbox" component={Inbox}>
<Route path="messages/" component={AllMessages} />
<Route path="messages/:id" component={Message} />
</Route>
);
}
});
<Router>
<Route path="/" component={App}>
<InboxRoutes/>
<CalendarRoutes/>
</Route>
</Router>
I get:
Warning: Location did not match any routes
一种解决方案是将它们包装在变量中:
let InboxRoutes = (
<Route path="inbox" component={Inbox}>
<Route path="messages/" component={AllMessages} />
<Route path="messages/:id" component={Message} />
</Route>
)
let CalendarRoutes = (/* define routes like above */)
let routes = (
<Router>
<Route path="/" component={App}>
{InboxRoutes}
{CalendarRoutes}
</Route>
</Router>
)
render(routes, document.getElementById("app"))
注意:你应该记住放入父路由的 render 方法{this.props.children}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)