React Router学习之旅（三）

看这些英文文档真的是让我见识到自己的英文水平真的是捉鸡，接下来的部分会越来越难，我的理解可能不是那么地准确，但是我还是将其记录下来，当我真正学懂时再回来看时可能就会更有感觉吧。

图片.png

你注意过在我们的app上我们并不需要任何的导航就可以渲染Home组件吗？

让我们添加一个链接到/上，看看发生可什么？

图片.png

现在导航栏已经做好了，注意到奇怪的地方吗？导航到Home的链接一直是活跃的！就像我们之前学到的一样，当子组件是活跃时，父组件也将是一直活跃的。不幸的是，/是所有的父组件。

对于这个链接，我们只想让它活跃当索引路由为活跃时。有两种方法让路由知道你正要链接到"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

我们现在所使用的URLs是由哈希搭建的，这个是默认的，但是还有一个更好的方法。

现代浏览器允许让JavaScript处理没有http的请求，所以我们不必依靠哈希#来控制我们路由的部分的url。

图片.png

我们现在配置浏览器的历史记录：

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。

问题来了，当我们点进任何的一个链接然后刷新之后就会报错。如下图所示：

图片.png

我们的服务器需要传递你的app所传进来的URL，因为你的app在浏览器中操纵着URL。我们的当前的服务器是不知道如何处理URL的。

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

--history-api-fallback

如下图所示这样：

图片.png

关掉webpack再重新启动：

图片.png

重新刷新页面我们便可以正常地使用了，在URL当中已经没有了#，而是直接的路径。

图片.png

这节内容跟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' }
    ]
  }
}

图片.png

当你运行npm start这个命令时，它会自动地检查我们的环境中是否有NODE_ENV,如果有，就会执行npm run start:prod，如果没有，则执行npm run start:dev。

未完成。。。