您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　11.2.1 路由

　　React-Router库提供了两个组件来完成路由功能，一个是Router，另一个是Route。前者Router在整个应用中只需要一个实例，代表整个路由器。后者Route则代表每一个路径对应页面的路由规则，一个应用中应该会有多个Route实例。

　　我们所要做的单页应用很简单，只包含三个页面，第一个是代表主页的Home，对应的路径是home，第二个是代表说明页的About，对应的路径是about，当地址栏为不被支持的路径时，我们也应该提示用户资源不存在，这第三个页面就是NotFound。

　　我们用create-react-app创造一个新的应用react_redux_basic，在本书的Github代码库https://github.com/mocheng/react-and-redux/的chapter-11/react_router_basic目录下可以找到完整代码。

　　在src/pages目录下分别创建Home.js、About.js和NotFound.js，每个文件都包含一个React组件，内容几乎相同，只是显示的文字不同，比如src/pages/Home.js中定义的Home组件代码如下：

　　const Home = () => {

　　return (

　　Home

　　);

　　};

　　可以看到，Home虽然概念上是一个“页面”，但是实现上是一个React组件，功能上没有任何特别之处。React-Router库认为每个页面就是一个React组件，当然这个组件可以包含很多子组件来构成一个复杂的页面。

　　当准备好三个页面之后，我们就可以开始定义路由规则了。

　　在src/Routes.js文件中，我们添加如下代码：

　　import React from 'react';

　　import {Router, Route, browserHistory} from 'react-router';

　　import Home from './pages/Home.js';

　　import About from './pages/About.js';

　　import NotFound from './pages/NotFound.js';

　　const history=browserHistory;

　　const Routes = () => (

　　);

　　export default Routes;

　　这个文件导出一个函数，函数返回一个Router组件实例，所以这个文件导出的其实也是一个React组件，正因为React组件提供了一个很好的界面功能封装，连路由功能也可以用组件形式表达。

　　Router实例的history属性值被赋为browserHistory，这样路由的改变就和浏览器URL的历史产生了关联，在后面的章节我们可以了解到history属性还可以是其他值。

　　然后Router实例包含三个Route子组件，分别完成三个路由规则，路径home被映射到Home组件，路径about被映射到About组件，一个*通配符代表的是所有路径，被映射到了NotFound组件。注意，路径为*通配符的这个Route实例必须放在最后。因为React-Router按照Route在代码中的先后顺序决定匹配的顺序，也就是首先将路径和home比较，如果不匹配才和about比较，依然不匹配才和*通配符比较，如果包含*通配符的Route放在了最前面，那它对任何路径都是匹配成功的，后面的Route规则根本不会有机会被匹配，那样所有的路径都会被映射到页面NotFound上，这明显不是我们想要的结果。

　　最后，我们把应用的入口src/index.js文件修改成这样：

　　import React from 'react';

　　import ReactDOM from 'react-dom';

　　import Routes from './Routes.js';

　　ReactDOM.render(

　　,

　　document.getElementById('root')

　　);

　　在render函数中，渲染的最顶层组件是从src/Routes.js中导入的Routes组件，这样，应用中所有的组件都居于Router的保护伞之下，每个组件能否被显示，都由Router来决定。

　　现在，我们通过命令行npm start启动这个单页应用，在浏览器中可以通过直接访问不同URL看到不同界面，http://localhost：3000/home或者http://localhost：3000/about可以看到对应文字，如图11-1所示。

　　图11-1 没有链接的Home页面效果

　　如果我们胡乱输入一个路径，比如http://localhost：3000/noway，看到的就是NotFound页面，如图11-2所示。

　　图11-2 Not Found页面效果

　　这说明React-Router的路由发挥了作用。然而目前这个应用很不完整，我们甚至无法验证不同页面之间切换是不是真的没有网页刷新，所以，我们需要在网页中增加一些链接。 深入浅出React和Redux