看這些英文文檔真的是讓我見識到自己的英文水平真的是捉雞，接下來的部分會越來越難，我的理解可能不是那么地準(zhǔn)確，但是我還是將其記錄下來，當(dāng)我真正學(xué)懂時再回來看時可能就會更有感覺吧。

圖片.png

你注意過在我們的app上我們并不需要任何的導(dǎo)航就可以渲染Home組件嗎？

讓我們添加一個鏈接到/上，看看發(fā)生可什么？

圖片.png

現(xiàn)在導(dǎo)航欄已經(jīng)做好了，注意到奇怪的地方嗎？導(dǎo)航到Home的鏈接一直是活躍的！就像我們之前學(xué)到的一樣，當(dāng)子組件是活躍時，父組件也將是一直活躍的。不幸的是，/是所有的父組件。

對于這個鏈接，我們只想讓它活躍當(dāng)索引路由為活躍時。有兩種方法讓路由知道你正要鏈接到"index route"，所以只有添加了"active"屬性時"index route"才會被渲染。

圖片.png

讓我們使用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>
    )
  }
})

圖片.png

我們同樣可以使用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>
    )
  }
})

圖片.png

我們現(xiàn)在所使用的URLs是由哈希搭建的，這個是默認(rèn)的，但是還有一個更好的方法。

現(xiàn)代瀏覽器允許讓JavaScript處理沒有http的請求，所以我們不必依靠哈希#來控制我們路由的部分的url。

圖片.png

我們現(xiàn)在配置瀏覽器的歷史記錄：

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。

問題來了，當(dāng)我們點進任何的一個鏈接然后刷新之后就會報錯。如下圖所示：

圖片.png

圖片.png

我們的服務(wù)器需要傳遞你的app所傳進來的URL，因為你的app在瀏覽器中操縱著URL。我們的當(dāng)前的服務(wù)器是不知道如何處理URL的。

Webpack Dev Server有辦法可以做到，找到package.json文件，然后添加后面的這段代碼：

--history-api-fallback

如下圖所示這樣：

圖片.png

圖片.png

關(guān)掉webpack再重新啟動：

圖片.png

重新刷新頁面我們便可以正常地使用了，在URL當(dāng)中已經(jīng)沒有了#，而是直接的路徑。

圖片.png

這節(jié)內(nèi)容跟React Router無關(guān)，但是這節(jié)與webpack dev server相關(guān)。

首先安裝這個模塊：

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' }
    ]
  }
}

圖片.png

當(dāng)你運行npm start這個命令時，它會自動地檢查我們的環(huán)境中是否有NODE_ENV,如果有，就會執(zhí)行npm run start:prod，如果沒有，則執(zhí)行npm run start:dev。

未完成。。。