一 创建一个项目
环境要求：node，npm
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">git clone https:<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">//github.com/reactjs/react-router-tutorial</span> cd react<span class="hljs-attribute" style="Box-sizing: border-Box;">-router</span><span class="hljs-attribute" style="Box-sizing: border-Box;">-tutorial</span> cd lessons/<span class="hljs-number" style="color: rgb(0,102,102); Box-sizing: border-Box;">01</span><span class="hljs-attribute" style="Box-sizing: border-Box;">-setting</span><span class="hljs-attribute" style="Box-sizing: border-Box;">-up</span> npm install npm start</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,221,221); list-style: none; text-align: right; background-color: rgb(238,238,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li></ul>
查看http://localhost:8080。项目已经启动了。
二、 渲染一个路由
1、渲染一个组件
从本质来讲，react-rout就是一个组件。如下：
<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="Box-sizing: border-Box;">render(<Router/>,document.<span class="hljs-function" style="Box-sizing: border-Box;">getElementById(<span class="hljs-string" style="color: rgb(0,136,0); Box-sizing: border-Box;">'app'</span>)</span>)</span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li></ul>
要讲这个组件显示出来，我们需要配置一个router
在index.
1. 引入Router和Rout
2. 渲染router
<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">// <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> import { Router,Route,hashHistory } from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'react-router'</span> render(( <Router history={hashHistory}> <Route path=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"/"</span> component={App}/> </Router> ),document.getElementById(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'app'</span>))</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li></ul>
开启服务，查看http://localhost:8080。虽然页面没有发生变化。
You should get the same screen as before,but this time with some junk in the URL. We’re using hashHistory–it manages the routing history with the hash portion of the url. It’s got that extra junk to shim some behavior the browser has natively when using real urls. We’ll change this to use real urls later and lose the junk,but for now,this works great because it doesn’t require any server-side configuration.
2、创建几个新的组件
- modules/About.js
- modules/Repos.js
<code class="hljs axapta has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// modules/About.js</span> import React from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'react'</span> export <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">default</span> React.createClass({ render() { <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> <<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">div</span>>About</<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">div</span>> } }) <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// modules/Repos.js</span> import React from <span class="hljs-string" style="color: rgb(0,136); Box-sizing: border-Box;">div</span>>Repos</<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">div</span>> } })</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li></ul>
在app中通过相对路径引入
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">import About from './modules/About' import Repos from './modules/Repos' render(( <span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;"><<span class="hljs-title" style="Box-sizing: border-Box; color: rgb(0,136);">Router</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">history</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">{hashHistory}</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">Route</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">path</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">"/"</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">component</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">{App}</span>/></span> {/* add the routes here */} <span class="hljs-tag" style="color: rgb(0,0);">"/repos"</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,0);">{Repos}</span>/></span> <span class="hljs-tag" style="color: rgb(0,0);">"/about"</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,0);">{About}</span>/></span> <span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;"></<span class="hljs-title" style="Box-sizing: border-Box; color: rgb(0,136);">Router</span>></span> ),document.getElementById('app'))</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li></ul>
查看http://localhost:8080/#/aboutandhttp://localhost:8080/#/repos
三、 创建导航
象上面那样，我们直接访问/#/about 可以获取并渲染对应的About组件，现在我们在首页中添加导航，只需点击导航，我们就可以访问对应的页面
在主页面添加导航
Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">// modules/App.js import React from 'react' import { Link } from 'react-router' export default React.createClass({ render() { return ( <span class="hljs-tag" style="color: rgb(0,136);">div</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">h1</span>></span>React Router Tutorial<span class="hljs-tag" style="color: rgb(0,136);">h1</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">ul</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">role</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">"nav"</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">li</span>></span><span class="hljs-tag" style="color: rgb(0,136);">Link</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">to</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">"/about"</span>></span>About<span class="hljs-tag" style="color: rgb(0,136);">Link</span>></span><span class="hljs-tag" style="color: rgb(0,136);">li</span>></span> <span class="hljs-tag" style="color: rgb(0,0);">"/repos"</span>></span>Repos<span class="hljs-tag" style="color: rgb(0,136);">li</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">ul</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">div</span>></span> ) } })</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li></ul>
通过在app.js中添加导航，我们可以在首页直接点击对应的按钮，即可进入对应的组件。这样的方法在之前，我们都是通过来实现的。
四、嵌套路由
我们在app.js中创建的导航，应该显示在各个页面。虽然我们可以将ul标签中的内容包含到各个组件中，但是react-router给我们提供了可以嵌套路由的方法。
嵌套UI和嵌套路由
我们的页面显示如下：最上面的导航栏，下方的左边是（文章）列表，右边显示对应的（文章）<code class="hljs 1c has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> +-------------------------------------+ <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| Home Repos About | <- App</span> +------+------------------------------+ <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| | |</span> Repos -> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| repo | Repo 1 |</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| | |</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| repo | Boxes inside Boxes |</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| | inside Boxes ... | <- Repo</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| repo | |</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">| | |</span> +------+------------------------------+</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li></ul>react-router顺应这种结构，让我们可以向文档结构和UI一样来嵌套路由
共享的导航栏
我们将About和Repos这两个组件嵌套在App中，这样我们就可以在所有页面共享我们的导航栏。
1、将App route 包含 about 和 repos 这两个路由。
2、将子组件在App中渲染出来现在再次点击导航，进入about页面时，我们会发现，包含导航的App组件任然显示着，而子路由对应的组件（{this.props.children}）被包含在App中。react-router将UI组织成如下形式
502" class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">// at /about <span class="hljs-tag" style="color: rgb(0,136);">App</span>></span> <span class="hljs-tag" style="color: rgb(0,136);">About</span>/></span> <span class="hljs-tag" style="color: rgb(0,136);">App</span>></span> // at /repos <span class="hljs-tag" style="color: rgb(0,136);">Repos</span>/></span> <span class="hljs-tag" style="color: rgb(0,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li></ul>将每件小事做好，组合起来就成就了大事
The best way to build large things is to stitch small things together.
这就是react-router真正的力量，每一个路由都可以作为一个单独的应用被开发（渲染），你可以如你所愿地通过你的路由配置将这些应用组合到一起。应用嵌套应用，盒子嵌套盒子。如果我们希望将About放到app外面，我们应该怎么做。
五、动态链接
react-rout和a标签不同的另外一个地方就是，react-rout知道自己当前是否是激活状态。所以我们可以将其自定义其显示样式。
1、动态的样式
@H_502_99@<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="Box-sizing: border-Box;">// modules/App.js <span class="hljs-tag" style="color: rgb(0,102);">activeStyle</span>=</span></span><span class="hljs-expression" style="Box-sizing: border-Box;">{{ <span class="hljs-variable" style="color: rgb(102,102); Box-sizing: border-Box;">color</span>: '<span class="hljs-variable" style="color: rgb(102,102); Box-sizing: border-Box;">red</span>' }}</span><span class="xml" style="Box-sizing: border-Box;"><span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">></span>About<span class="hljs-tag" style="color: rgb(0,136);">li</span>></span> <span class="hljs-tag" style="color: rgb(0,102); Box-sizing: border-Box;">></span>Repos<span class="hljs-tag" style="color: rgb(0,136);">li</span>></span></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li></ul>2、动态的类名
Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',102);">activeClassName</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">"active"</span>></span>About<span class="hljs-tag" style="color: rgb(0,0);">"active"</span>></span>Repos<span class="hljs-tag" style="color: rgb(0,136);">li</span>></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li></ul>在App中引入css文件
内容如下：<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="Box-sizing: border-Box; color: rgb(155,112,63);">.active</span> <span class="hljs-rules" style="Box-sizing: border-Box;">{ <span class="hljs-rule" style="Box-sizing: border-Box;"><span class="hljs-attribute" style="Box-sizing: border-Box;">color</span>:<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,102);"> green</span></span>; <span class="hljs-rule" style="Box-sizing: border-Box;">}</span></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li></ul>由于不能自动加载入口文件index.html.需要刷新浏览器
导航链接的封装
Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',0); Box-sizing: border-Box;">// modules/NavLink.js</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">import</span> React from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'react'</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">import</span> { <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">Link</span> } from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'react-router'</span> export default React<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>createClass({ render() { <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><</span><span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">Link</span> {<span class="hljs-attribute" style="Box-sizing: border-Box;">...</span>this<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span>props} activeClassName<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">=</span><span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"active"</span><span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">/</span><span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">></span> } }) Now you can go change your links <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">to</span> NavLinks<span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">.</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// App.js</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">import</span> NavLink from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'./NavLink'</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// ...</span> <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><</span>li<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">><</span>NavLink <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">to</span><span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">"/about"</span><span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">></span>About<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;"><</span>/NavLink<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">><</span>/li<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">></span> <span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">"/repos"</span><span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">></span>Repos<span class="hljs-subst" style="color: rgb(0,0); Box-sizing: border-Box;">></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li></ul>六、URL参数
想一想，下面这些链接，我们改如何操作
/repos/reactjs/react-router
/repos/facebook/re他们对应的路由如下
/repos/:userName/:repoName
这些以：开头的是url参数，被解析出来后，作为变量被路由组件使用，如：this.props.params[name]增加带参数的路由
应用该如何渲染如下的url:/repos/:userName/:repoName.
首先我们需要一个可以被改路由渲染出来的组件，如下创建一个
<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',0); Box-sizing: border-Box;">// modules/Repo.js</span> import React <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">from</span> <span class="hljs-string" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> ( <div> <h2>{<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">this</span>.props.<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">params</span>.repoName}</h2> <h2>{<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">params</span>.userName}</h2> </div> ) } })</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,43); font-family:'microsoft yahei'; font-size:14px; line-height:26px"> 点击 repos可以看到下方的列表，点击react-router可以看见 react-router 和reactjs分别作为repoName 和 userName 输出来了。七、更多的构建
如果我们点击一个repo的链接，进入到一个repo中，这个时候我们想进入另外一个repo.我们需要返回去。我们是否可以将repos中的链接如导航栏一下，显示在各个repo中呢？
首先，我们将Repo Route 放到 Repos Route的里面，然后将repo作为this.props.children在repos中渲染出来。
Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',136); Box-sizing: border-Box;">...</span> <Route path=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"/repos"</span> component={Repos}> <Route path=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"/repos/:userName/:repoName"</span> component={Repo}/> </Route> // Repos.js // <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> <div> <h2>Repos</h2> <ul> <li><Link to=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"/repos/reactjs/react-router"</span>>React Router</Link></li> <li><Link to=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"/repos/facebook/react"</span>>React</Link></li> </ul> {/* will render `Repo.js` when at /repos/:userName/:repoName */} {this.props.children} </div></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li></ul>八、index路由
哈，终于到这一节了，从一开始我就在纳闷，我的首页只有一个导航，当我要在首页放入其它的内容是，我到了About和Repos,这些内容也会呈现出来，现在我们可以创建一个单独的Home组件来解决这个问题。
一种方式是，判断是否用子组件，如果没有就调用Home,否则，调用子组件Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">// App.js import Home from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'./Home'</span> // <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> <div> {/* <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> */} {this.props.children || <Home/>} </div> //<span class="hljs-keyword" style="color: rgb(0,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li></ul>这样实现看起来也不错，但是，我们希望Hoem组件也能够给像About和Repos一样同路由关联起来，这是因为一下几点：
1.数据的抽象化获取依赖匹配的路由和其组件
2.OnEnter 钩子
3.代码分离并且，将App与Home进行解耦，用路由来配置决定那个子组件将被渲染，这样更好。要记住，我们希望在小的组件中构建更小的组件，而不是一个很笨重的家伙。
所以，我们需要在index.js中添加新的路由Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> // index.js // new imports: // add `IndexRoute` to 'react-router' imports import { Router,hashHistory,IndexRoute } from 'react-router' // and the Home component import Home from './modules/Home' // ... render(( <span class="hljs-tag" style="color: rgb(0,0);">{App}</span>></span> {/* add it here,as a child of `/` */} <span class="hljs-tag" style="color: rgb(0,136);">IndexRoute</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,0);">{Home}</span>/></span> <span class="hljs-tag" style="color: rgb(0,0);">{Repos}</span>></span> <span class="hljs-tag" style="color: rgb(0,0);">"/repos/:userName/:repoName"</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,0);">{Repo}</span>/></span> <span class="hljs-tag" style="color: rgb(0,136);">Route</span>></span> <span class="hljs-tag" style="color: rgb(0,0);">{About}</span>/></span> <span class="hljs-tag" style="color: rgb(0,136);">Route</span>></span> <span class="hljs-tag" style="color: rgb(0,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li><li style="Box-sizing: border-Box; padding: 0px 5px;">20</li><li style="Box-sizing: border-Box; padding: 0px 5px;">21</li><li style="Box-sizing: border-Box; padding: 0px 5px;">22</li><li style="Box-sizing: border-Box; padding: 0px 5px;">23</li></ul>我们发现，Indexroute 没有 path参数，当父级没有其它参数时并被路由命中时，它成为 this.props.children。
Index route有时候会让人感觉很绕，但用的多了，理解也会更深刻。你可以这样想，如果你访问了一个网站的根目录，/index.html。这个时候，他就回去找 index route九、Index 链接
如果你发现我们没有一个链接可以回到首页，那么现在我们开始解决这个问题。
按照之前的做法，你也许会这样做Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',136); Box-sizing: border-Box;">in</span> App.js // <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> <li><NavLink to=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">"/"</span>>Home</NavLink></li> // <span class="hljs-keyword" style="color: rgb(0,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li></ul>回到浏览器，你高兴的发现链接有了，而且点击后也可以渲染 Home 组件，但奇怪的是，为什么不论当时是哪个页面，Home都是激活状态呢，根据之前学的我们知道，子级路由激活后，父级路由就会激活，但是，/是所有组件的父级。
对应该链接，我们希望它只在Home组件被渲染时，才显示为激活状态，只有当Index路由被渲染时，我们需要让路由组改变index route的状态。两种办法如下：
IndexLink
首先，我们可以使用IndexLink
如此，我们修复了在其它页面 Index route也被激活的问题。onlyActiveOnIndex Property
我们可以使用一个参数来标示，如下
之前我们用了NavLink来封装，这里我们也可以这样使用Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',136);">NavLink</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,136);">NavLink</span>></span><span class="hljs-tag" style="color: rgb(0,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li></ul>十、用Browser History是urls更简洁
我们应用中的URLs使用了hash技术，这是默认的配置，但是我们有更好的选择。
现在的浏览器可以用Javascript来操作url而不不用发送请求，所以我们不需要依赖哈希（#)散列来实现路由，但是这有一个问题（稍后会讲到）##配置 BrowserHistory
打开index.js 导入 browserHistory 替换掉 hashHistoryBox-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> // index.js // <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> // bring <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">in</span> `browserHistory` instead of `hashHistory` import { Router,browserHistory,IndexRoute } from <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'react-router'</span> render(( <Router history={browserHistory}> {/* <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> */} </Router> ),238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li></ul>回到浏览器，现在可以看到你的URLs变得更简洁了，但是，刷新一下浏览器，Oh,what happened!
你看到应该和下面一样Cannot GET /repos
Configuring Your Server
无论你传递了什么url,你的服务器都需要传递给你的app,因为你的应用，一直在操纵浏览器中的URLs.但是当前的服务器去不知道如何处理这些URL.
Webpack-dev-server有一个配置选项，打开package.json 增加 –history-api-fallback.<code class="hljs brainfuck has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">"start":</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">"webpack</span><span class="hljs-literal" style="color: rgb(0,102); Box-sizing: border-Box;">-</span><span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">dev</span><span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">server</span> <span class="hljs-literal" style="color: rgb(0,102); Box-sizing: border-Box;">-</span><span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">inline</span> <span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">content</span><span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">base</span> <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">.</span> <span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">history</span><span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">api</span><span class="hljs-literal" style="color: rgb(0,0); Box-sizing: border-Box;">fallback"</span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,43); font-family:'microsoft yahei'; font-size:14px; line-height:26px"> 改变一下index.html文件中的相对路径为绝对路径，Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',0); Box-sizing: border-Box;"><!-- index.html --></span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;"><!-- index.css -> /index.css --></span> <span class="hljs-tag" style="color: rgb(0,0);">stylesheet</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">href</span>=/<span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">index.css</span>></span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;"><!-- bundle.js -> /bundle.js --></span> <span class="hljs-tag" style="color: rgb(0,136);">script</span> <span class="hljs-attribute" style="Box-sizing: border-Box; color: rgb(102,102);">src</span>=<span class="hljs-value" style="Box-sizing: border-Box; color: rgb(0,0);">"/bundle.js"</span>></span><span class="javascript" style="Box-sizing: border-Box;"></span><span class="hljs-tag" style="color: rgb(0,136);">script</span>></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li></ul>重启 npm start。现在的URLs依然很简洁，而且刷新也没问题了
十一、Production-ish Server
这一章似乎和React-router没什么关系，但是既然我们在讨论web服务器，我想让情景变得更真实。在下一张，我们也会用到服务端渲染。由于，Webpack-dev-server不是一个真正的生产环境的server，我们需要搭建一个生产环境的sever，并且了解一些环境配置的知识，然后我们就可以开启生产服务器了。
首先，需要安装一些模块儿。
<code class="hljs lua has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">npm install express <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span>-env compression <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">--save</span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,43); font-family:'microsoft yahei'; font-size:14px; line-height:26px"> 首先，我们需要在package.json中配置一下 if-env.如下：<code class="hljs sql has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">// package.json "scripts": { "<span class="hljs-operator" style="Box-sizing: border-Box;"><span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">start</span><span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">": "</span><span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span>-env NODE_ENV=production && npm run <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">start</span>:prod || npm run <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">start</span>:dev<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">","</span><span class="hljs-keyword" style="color: rgb(0,0); Box-sizing: border-Box;">": "</span>webpack-dev-server --inline --content-base . --history-api-fallback<span class="hljs-string" style="color: rgb(0,136); Box-sizing: border-Box;">start</span>:prod<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">": "</span>webpack && node server.js<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">" },</span></span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,43); font-family:'microsoft yahei'; font-size:14px; line-height:26px"> 这样，当我们启动服务，npm start时，会进行判断，如果 NODE_ENV=production 则会执行npm run start:prod，否则 npm run start:dev我们需要用Express来创建一个服务。如下：
<code class="hljs PHP has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',0); Box-sizing: border-Box;">// server.js</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> express = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">require</span>(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'express'</span>) <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> path = <span class="hljs-keyword" style="color: rgb(0,0); Box-sizing: border-Box;">'path'</span>) <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> compression = <span class="hljs-keyword" style="color: rgb(0,0); Box-sizing: border-Box;">'compression'</span>) <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> app = express() <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// serve our static stuff like index.css</span> app.<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">use</span>(express.<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">static</span>(__dirname)) <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// send all requests to index.html so browserHistory in React Router works</span> app.get(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'*'</span>,<span class="hljs-function" style="Box-sizing: border-Box;"><span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">function</span> <span class="hljs-params" style="color: rgb(102,102); Box-sizing: border-Box;">(req,res)</span> {</span> res.sendFile(path.join(__dirname,<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'index.html'</span>)) }) <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> PORT = process.env.PORT || <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">8080</span> app.listen(PORT,136); Box-sizing: border-Box;">function</span><span class="hljs-params" style="color: rgb(102,102); Box-sizing: border-Box;">()</span> {</span> console.log(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'Production Express server running at localhost:'</span> + PORT) })</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li><li style="Box-sizing: border-Box; padding: 0px 5px;">19</li></ul>启动服务
恭喜，你可以随便点击一下，我们的后端服务也已经搭好了。
访问一下http://localhost:8080/package.json。你会发现，这样的文件我们是不希望被访问到的。所以我们需要配置一下哪些目录是可以访问的。在webpack配置文件中，添加如下：在启动文件中增加如下：现在我们根目录不再是一个公共的目录，我们再添加一些压缩代码的功能<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',0); Box-sizing: border-Box;">// webpack.config.js</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// make sure to import this</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> webpack = <span class="hljs-built_in" style="color: rgb(102,102); Box-sizing: border-Box;">require</span>(<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'webpack'</span>) module.exports = { <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// ...</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// add this handful of plugins that optimize the build</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// when we're in production</span> plugins: process.env.NODE_ENV === <span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">'production'</span> ? [ <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">new</span> webpack.optimize.DedupePlugin(),136); Box-sizing: border-Box;">new</span> webpack.optimize.OccurrenceOrderPlugin(),136); Box-sizing: border-Box;">new</span> webpack.optimize.UglifyJsPlugin() ] : [],<span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// ...</span> }</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li><li style="Box-sizing: border-Box; padding: 0px 5px;">8</li><li style="Box-sizing: border-Box; padding: 0px 5px;">9</li><li style="Box-sizing: border-Box; padding: 0px 5px;">10</li><li style="Box-sizing: border-Box; padding: 0px 5px;">11</li><li style="Box-sizing: border-Box; padding: 0px 5px;">12</li><li style="Box-sizing: border-Box; padding: 0px 5px;">13</li><li style="Box-sizing: border-Box; padding: 0px 5px;">14</li><li style="Box-sizing: border-Box; padding: 0px 5px;">15</li><li style="Box-sizing: border-Box; padding: 0px 5px;">16</li><li style="Box-sizing: border-Box; padding: 0px 5px;">17</li><li style="Box-sizing: border-Box; padding: 0px 5px;">18</li></ul>Box-sizing: border-Box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">// server.js // <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">...</span> var compression = <span class="hljs-keyword" style="color: rgb(0,0); Box-sizing: border-Box;">'compression'</span>) var app = express() // must be first! app.use(compression())</code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="Box-sizing: border-Box; padding: 0px 5px;">1</li><li style="Box-sizing: border-Box; padding: 0px 5px;">2</li><li style="Box-sizing: border-Box; padding: 0px 5px;">3</li><li style="Box-sizing: border-Box; padding: 0px 5px;">4</li><li style="Box-sizing: border-Box; padding: 0px 5px;">5</li><li style="Box-sizing: border-Box; padding: 0px 5px;">6</li><li style="Box-sizing: border-Box; padding: 0px 5px;">7</li></ul>现在启动服务
<code class="hljs fix has-numbering" style="display: block; padding: 0px; color: inherit; Box-sizing: border-Box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-attribute" style="Box-sizing: border-Box;">NODE_ENV</span>=<span class="hljs-string" style="color: rgb(0,0); Box-sizing: border-Box;">production npm start</span></code><ul class="pre-numbering" style="Box-sizing: border-Box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,43); font-family:'microsoft yahei'; font-size:14px; line-height:26px"> 可以发现，UglifyJs打印的日志，而且输出文件已经被压缩了。未完待续。。。。(后面的部分我自己还没看懂)
原文链接：https://www.f2er.com/react/305947.html
翻译的是github上的入门讲解，详见https://github.com/reactjs/react-router-tutorial
