React Router 使用教程

---

Route组件还可以嵌套。

<Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>

上面代码中，用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件。

App组件要写成下面的样子。

export default React.createClass({ render() { return <div> {this.props.children} </div> } })

上面代码中，App组件的this.props.children属性就是子组件。

子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。

let routes =

;

三、 path 属性

---

Route组件的path属性指定路由的匹配规则。这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件。

请看下面的例子。

上面代码中，当用户访问/inbox/messages/:id时，会加载下面的组件。

如果省略外层Route的path参数，写成下面的样子。

现在用户访问/inbox/messages/:id时，组件加载还是原来的样子。

四、通配符

---

path属性可以使用通配符。

// 匹配 /hello/michael

// 匹配 /hello/ryan

// 匹配 /hello

// 匹配 /hello/michael

// 匹配 /hello/ryan

// 匹配 /files/hello.jpg

// 匹配 /files/hello.html

// 匹配 /files/

<