react-router

2018-07-02

阅读量

At its heart, React Router is a component.

@2.X

组件

Router

属性：

history : 用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配
- hashHistory - 路由将通过URL的hash部分(#)切换
- browserHistory - 背后调用的是浏览器的History API (开发时dev-server添加参数 –history-api-fallback)
routes : 可以传入子路由

Route

属性：

path : 指定路由的匹配规则 (可使用通配符)
- :paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。
  - 1
    2
    3
    <Route path="/hello/:name">
    // 匹配 /hello/michael
    // 匹配 /hello/ryan
- ()表示URL的这个部分是可选的。
  - 1
    2
    3
    4
    <Route path="/hello(/:name)">
    // 匹配 /hello
    // 匹配 /hello/michael
    // 匹配 /hello/ryan
- *匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
  - 1
    2
    3
    4
    5
    6
    7
    8
    <Route path="/files/*.*">
    // 匹配 /files/hello.jpg
    // 匹配 /files/hello.html
    
    <Route path="/files/*">
    // 匹配 /files/
    // 匹配 /files/a
    // 匹配 /files/a/b
- ** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。
  - 1
    2
    3
    <Route path="/**/*.jpg">
    // 匹配 /files/hello.jpg
    // 匹配 /files/path/to/file.jpg
- URL的查询字符串/foo?bar=baz，可以用this.props.location.query.bar获取。
component : 匹配到路由是加载的组件
onEnter 和 onLeave : 用户进入或离开该路由时触发的钩子

IndexRoute

显式指定Home是根路由的子组件，即指定默认情况下加载的子组件
IndexRoute组件没有路径参数path。

Redirect

<Redirect>组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。

IndexRedirect

IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。

Link

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本，可以接收Router的状态。

IndexLink

如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件，实际上，IndexLink就是对Link组件的onlyActiveOnIndex属性的包装。。

const routes = <Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <IndexRedirect to="/welcome"/>
  <Route path="/welcome" component={Welcome} />
  <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
  </Route>
  <Route path="/about" component={About}/>
  <Route path="inbox" component={Inbox}>
  	{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
    <Redirect from="messages/:id" to="/messages/:id" />
  </Route>
</Route>;

<Router history={hashHistory/browserHistory} routes={routes}/>

#####

基本使用

import { Router, Route, hashHistory, Link } from 'react-router'

(<Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Router>)
//Link: It's almost identical to the <a/> tag you're used to except that it's aware of the Router it was rendered in.
(<ul role="nav">
  <li><Link to="/about">About</Link></li>
  <li><Link to="/repos">Repos</Link></li>
</ul>)


//Nested Routes嵌套路由
(<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>)
//More Nesting
(<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}>
      <Route path="/repos/:userName/:repoName" component={Repo}/>
    </Route>
    <Route path="/about" component={About}/>
  </Route>
</Router>)
//通过this.props.children获取子路由, 这样公共的导航就不用重复引了
(<div>
  <h1>React Router Tutorial</h1>
  <ul role="nav">
    <li><Link to="/about">About</Link></li>
    <li><Link to="/repos">Repos</Link></li>
  </ul>
  {this.props.children}
</div>)


//Active Links 路由激活状态
(<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>)
(<li><Link to="/about" activeClassName="active">About</Link></li>)
//为了避免到处出现 activeStyle 或者 activeClassName，封装成 NavLink 组件
render() {
  return <Link {...this.props} activeClassName="active"/>
}
//使用时
(<li><NavLink to="/about">About</NavLink></li>)


//URL Params 在路由 path 中: 后设置参数，由 this.props.params[name]获取
(<Route path="/repos/:userName/:repoName" component={Repo}/>)
(<h2>{this.props.params.repoName}</h2>)

//this.props
(this.props: {
  children,
  history,
  location,
  params,
  route,
  routeParams,
  toures,
})


//Index Routes 主路由
import { IndexRoute } from 'react-router'

(<Router history={hashHistory}>
  <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>)

//Index Links 主链接 (如果直接用Link会一直高亮, 因为一直匹配/)
import { IndexLink } from 'react-router'
(<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>)
//or use onlyActiveOnIndex={true} (以下NAVLink是上面封装的组件)
(<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>)


//Clean URLs with Browser History 使用 browserHistory 替代 hashHistory 从而获得纯净的 URL
import { browserHistory } from 'react-router'
(<Router history={browserHistory}>
  {/* ... */}
</Router>)
//when refresh browser, Cannot GET /repos
//Your server needs to deliver your app no matter what URL comes in, because your app, in the browser, is manipulating the URL. Our current server doesn't know how to handle the URL.
/*
* env = dev
* 1. Open up package.json and add --history-api-fallback.
* 2. We also need to change our relative paths to absolute paths in index.html since the URLs will be at deep paths and the app, if it starts at a deep path, won't be able to find the files.
*/


//Production-ish Server
/*
* env = production
* https://github.com/reactjs/react-router-tutorial/tree/master/lessons/11-productionish-server
*/
npm install express if-env compression --save

// package.json
"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"
},

// server.js --- start
var express = require('express')
var path = require('path')
var compression = require('compression')

var app = express()
// must be first!
app.use(compression())

// serve our static stuff like index.css
app.use(express.static(path.join(__dirname, 'public')))

// send all requests to index.html so browserHistory in React Router works
app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'))
})

var PORT = process.env.PORT || 3003
app.listen(PORT, function() {
  console.log('Production Express server running at localhost:' + PORT)
})
// server.js --- end

// webpack.config.js --- start
var webpack = require('webpack')

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' }
    ]
  },
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],
}
// webpack.config.js --- end


//Navigating Programatically 非 Link 跳转
/*
* 使用browserHistory
*/
import { browserHistory } from 'react-router'
browserHistory.push(path)
/*
* 使用context
*/
contextTypes: {
  router: React.PropTypes.object
},
this.context.router.push(path)


//抽离路由模块
//routes.js
module.exports = (
  <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>
)
//index.js
import routes from './modules/routes'
(<Router routes={routes} history={browserHistory} />)