react-route 版本 0.13.x 与 版本1.0 的改变

Importing

新的 Router 组件是顶层模块的属性。

// v0.13.x
var Router = require('react-router');
var Route = Router.Route;

// v1.0
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

// or using ES Modules
import { Router, Route } from 'react-router';

Rendering

// v0.13.x
Router.run(routes, (Handler) => {
  render(, el);
})

// v1.0
render({routes}, el)

// looks more like this:
render((
  
    
  
), el);

// or if you'd rather
render(, el)

Locations

Locations 现在被称为 histories（可发射位置）。可以从 history package引入，而不是 react router。

// v0.13.x
Router.run(routes, Router.BrowserHistory, (Handler) => {
  render(, el);
})

// v1.0
import createBrowserHistory from 'history/lib/createBrowserHistory'
let history = createBrowserHistory()
render({routes}, el)

如果没有指定一个 history 的类型（如上面的例子），那么你将到 1.0.0 后会发现一些不同寻常的行为。使用默认的基于哈希的路由查询字符串不由自己定义，将开始出现在你的网址被称为_k。例如会这样：?_k=umhx1s

这是 createHashHistroy（也就是，如果没有指定一个默认的 history 方法） 的一部分。

Route Config

你还是可以跟以前一样嵌套路由，路径还是跟以前一样继承自父母，但是支柱的名称改变了。

// v0.13.x


// v1.0

NotFound route

// v0.13.x


// v1.0

Redirect route

// v0.13.x


// v1.0
// 除了参数都放在路由上，其他都跟之前一样，

Links

path / params

如果学过 angular 的同学对这部分的改变会比较的熟悉，并会对此大赞！！

// v0.13.x
Mateusz

// v1.0
// 链接到整个路径，再也不用知道参数的名称并且字符串模板很美观大方
Mateusz

Linking to Index routes

// v0.13.x
// with this route config 
  // will be active only when home is active, not when about is activeHome// v1.0  // will be active only when home is active, not when about is activeHome

"active" class

在 0.13.x 版本，链接默认的添加active类，你可以覆盖activeClassName ，或提供activeStyles 。通常只是少数人需要的这种导航。

链接不再默认添加active类（因为成本较高并且通常不必要），你可选择设置一个。如果activeClassName或者activeStyles都没有设置，那么链接就不会自动检测它的是否 active。

// v0.13.x
About

// v1.0
About

Linking to Index routes

// v0.13.x
// with this route config

  
  


// will be active only when home is active, not when about is active
Home

// v1.0

  
  


// will be active only when home is active, not when about is active
Home

RouteHandler

没有RouteHandler 了. Router在是动态的路由的基础上，自动在你组件的this.props.children里。

// v0.13.x



// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something})}

这种写法有一点语义上的改变。React 在当元素被创建时候验证propTypes，比当它们即将被渲染的时候好。
更多详情，看这里：
facebook/react#4494.

Navigation Mixin

If you were using the Navigation mixin, use the History mixin instead.
Navigation mixin，现在用History mixin替代。

// v0.13.x
var Assignment = React.createClass({
  mixins: [ Navigation ],
  navigateAfterSomethingHappened () {
    this.transitionTo('/users', { userId: user.id }, query);
    // this.replaceWith('/users', { userId: user.id }, query);
  }
})

// v1.0
var Assignment = React.createClass({
  mixins: [ History ],
  navigateAfterSomethingHappened () {
    // the router is now built on rackt/history, and it is a first class
    // API in the router for navigating
    this.history.pushState(null, `/users/${user.id}`, query);
    // this.history.replaceState(null, `/users/${user.id}`, query);
  }
})

之前Navigation下的方法，在 history 下也有，主要的不同在于没有参数或者路由名称，仅仅是路径名。

v0.13	v1.0
go(n)	go(n)
goBack()	goBack()
goForward()	goForward()
makeHref(routeName, params, query)	createHref(pathname, query)
makePath(routeName, params, query)	createPath(pathname, query)

State mixin

// v0.13.x
var Assignment = React.createClass({
  mixins: [ State ],
  foo () {
    this.getPath()
    this.getParams()
    // etc...
  }
})

// v1.0
// if you are a route component...


var Assignment = React.createClass({
  foo () {
    this.props.location // contains path information
    this.props.params // contains params
    this.props.history.isActive('/pathToAssignment')
  }
})

// if you're not a route component, you need to pass location down the
// tree or get the location from context. We will probably provide a
// higher order component that will do this for you but haven't yet.
// see further down for more information on what can be passed down
// via context
var Assignment = React.createClass({
  contextTypes: {
    location: React.PropTypes.object
  },
  foo () {
    this.context.location
  }
})

下表展示了你过去在Statemixin下获取东西的方法和如果是组件的话，现在获取方法

v0.13 (this)	v1.0 (this.props)
getPath()	location.pathname+location.search
getPathname()	location.pathname
getParams()	params
getQuery()	location.search
getQueryParams()	location.query
getRoutes()	routes
isActive(to, params, query)	history.isActive(pathname, query, onlyActiveOnIndex)

下表是过去通过State获取属性方法，和现在如果不是组件的情况下获取的方法对比

v0.13 (this)	v1.0 (this.context)
getPath()	location.pathname+location.search
getPathname()	location.pathname
getQuery()	location.query
isActive(to, params, query)	history.isActive(pathname, query, indexOnly)

注意：在 v1.0 不是所有的State功能都有。例如，params通过上下文是没用的。

本文译自：
https://github.com/rackt/react-router/blob/master/CHANGES.md