标签：dynamic 9.png rect asics 简单 情况 keyword 解耦 关系
我们来通过一个简单的例子解释一下如何编写路由配置。
React.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)
通过上面的配置，这个应用知道如何渲染下面四个 URL：
想象一下当 URL 为 / 时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面
<IndexRoute component={Dashboard} />
React.render(( <Router> <Route path="/" component={App}> <IndexRoute component={Dashboard} /> <Route path="inbox" component={Inbox}> {/* 使用 /messages/:id 替换 messages/:id */} <Route path="/messages/:id" component={Message} /> </Route> </Route> </Router> ), document.body)
我们现在的 URL 对应关系如下
提醒：绝对路径可能在动态路由中无法使用
{/* 跳转 /inbox/messages/:id 到 /messages/:id */}
<Redirect from="messages/:id" to="/messages/:id" />
标签：dynamic 9.png rect asics 简单 情况 keyword 解耦 关系
原文地址：http://www.cnblogs.com/vs1435/p/7341484.html
