React Router 使用教程

你可能还注意到，Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。

Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。

上面代码中，用户访问/repos（比如http://localhost:8080/#/repos）时，加载Repos组件；访问/about（http://localhost:8080/#/about）时，加载About组件。

二、嵌套路由

---

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/

// 匹配 /files/a

// 匹配 /files/a/b

// 匹配 /files/hello.jpg

// 匹配 /files/path/to/file.jpg

通配符的规则如下。

（1）:paramName

:paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。

（2）()

()表示URL的这个部分是可选的。

（3）*

*匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

（4） **

** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。

path属性也可以使用相对路径（不以/开头），匹配时就会相对于父组件的路径，可以参考上一节的例子。嵌套路由如果想摆脱这个规则，可以使用绝对路由。

路由匹配规则是从上到下执行，一旦发现匹配，就不再其余的规则了。

<Route path=“/comments” … />

<Route path=“/comments” … />

上面代码中，路径/comments同时匹配两个规则，第二个规则不会生效。

设置路径参数时，需要特别小心这一点。

上面代码中，用户访问/about/me时，不会触发第二个路由规则，因为它会匹配/:userName/:id这个规则。因此，带参数的路径一般要写在路由规则的底部。

此外，URL的查询字符串/foo?bar=baz，可以用this.props.location.query.bar获取。

五、IndexRoute 组件

---

下面的例子，你会不会觉得有一点问题？

<Route path="accounts" component={Accounts}/>

<Route path="statements" component={Statements}/>

上面代码中，访问根路径/，不会加载任何子组件。也就是说，App组件的this.props.children，这时是undefined。

因此，通常会采用{this.props.children || <Home/>}这样的写法。这时，Home明明是Accounts和Statements的同级组件，却没有写在Route中。

IndexRoute就是解决这个问题，显式指定Home是根路由的子组件，即指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。

<IndexRoute component={Home}/>

<Route path="accounts" component={Accounts}/>

<Route path="statements" component={Statements}/>

现在，用户访问/的时候，加载的组件结构如下。

这种组件结构就很清晰了：App只包含下级组件的共有元素，本身的展示内容则由Home组件定义。这样有利于代码分离，也有利于使用React Router提供的各种API。

注意，IndexRoute组件没有路径参数path。

六、Redirect 组件

---

<Redirect>组

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。

{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}

＜Redirect from=“messages/:id” to=“/messages/:id” />

现在访问/inbox/messages/5，会自动跳转到/messages/5。

七、IndexRedirect 组件

---

IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。

＜IndexRedirect to=“/welcome” />

上面代码中，用户访问根路径时，将自动重定向到子组件welcome。

八、Link

---

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本，可以接收Router的状态。

render() { return <div> <ul role="nav"> <li><Link to="/about">About</Link></li> <li><Link to="/repos">Repos</Link></li> </ul> </div> }

如果希望当前的路由与其他路由有不同样式，这时可以使用Link组件的activeStyle属性。

上面代码中，当前页面的链接会红色显示。

另一种做法是，使用activeClassName指定当前路由的Class。

About

Repos

上面代码中，当前页面的链接的class会包含active。

在Router组件之外，导航到路由页面，可以使用浏览器的History API，像下面这样写。

import { browserHistory } from 'react-router'; browserHistory.push('/some/path');

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。