看這些英文文檔真的是讓我見識到自己的英文水平真的是捉雞，接下來的部分會越來越難，我的理解可能不是那么地準確，但是我還是將其記錄下來，當我真正學懂時再回來看時可能就會更有感覺吧。
你注意過在我們的app上我們并不需要任何的導航就可以渲染Home組件嗎？
讓我們添加一個鏈接到/上，看看發生可什么？
現在導航欄已經做好了，注意到奇怪的地方嗎？導航到Home的鏈接一直是活躍的！就像我們之前學到的一樣，當子組件是活躍時，父組件也將是一直活躍的。不幸的是，/是所有的父組件。
對于這個鏈接，我們只想讓它活躍當索引路由為活躍時。有兩種方法讓路由知道你正要鏈接到"index route"，所以只有添加了"active"屬性時"index route"才會被渲染。
讓我們使用IndexLink而不是NavLink。
//App.js
import React from 'react'
import NavLink from './NavLink'
import {IndexLink} from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
我們同樣可以使用Link通過使用onlyActiveOnIndex屬性。
import React from 'react'
import NavLink from './NavLink'
import {IndexLink} from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
我們現在所使用的URLs是由哈希搭建的，這個是默認的，但是還有一個更好的方法。
現代瀏覽器允許讓JavaScript處理沒有http的請求，所以我們不必依靠哈希#來控制我們路由的部分的url。
我們現在配置瀏覽器的歷史記錄：
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browerHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'
render((
<Router history={browerHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))
也就是把hashHistory改為browserHistory。
問題來了，當我們點進任何的一個鏈接然后刷新之后就會報錯。如下圖所示：
我們的服務器需要傳遞你的app所傳進來的URL，因為你的app在瀏覽器中操縱著URL。我們的當前的服務器是不知道如何處理URL的。
Webpack Dev Server有辦法可以做到，找到package.json文件，然后添加后面的這段代碼：
--history-api-fallback
如下圖所示這樣：
關掉webpack再重新啟動：
重新刷新頁面我們便可以正常地使用了，在URL當中已經沒有了#，而是直接的路徑。
這節內容跟React Router無關，但是這節與webpack dev server相關。
首先安裝這個模塊：
npm install express if-env compression --save
接著分別配置package.json和webpack.config.js文件：
package.json：
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:dev": "webpack-dev-server --inline --content-base . --history-api-fallback",
"start:prod": "webpack && node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"compression": "^1.7.1",
"express": "^4.16.2",
"if-env": "^1.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.8.5",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js：
module.exports = {
entry: './index.js',
output: {
path: 'public',
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
當你運行npm start這個命令時，它會自動地檢查我們的環境中是否有NODE_ENV,如果有，就會執行npm run start:prod，如果沒有，則執行npm run start:dev。
未完成。。。
