美文网首页
React Router学习之旅(三)

React Router学习之旅(三)

作者: LU7IN | 来源:发表于2017-12-24 17:05 被阅读0次

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

图片.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 图片.png

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

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

--history-api-fallback

如下图所示这样:

图片.png 图片.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

未完成。。。

相关文章

网友评论

      本文标题:React Router学习之旅(三)

      本文链接:https://www.haomeiwen.com/subject/lelhgxtx.html