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(<Handler/>, el);
})

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

// looks more like this:
render((
  <Router>
    <Route path="/" component={App}/>
  </Router>
), el);

// or if you'd rather
render(<Router routes={routes}/>, el)

Locations

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

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

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

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

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

Route Config

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

// v0.13.x
<Route name="about" handler={About}/>

// v1.0
<Route path="about" component={About}/>

NotFound route

// v0.13.x
<NotFoundRoute handler={NoMatch}/>

// v1.0
<Route path="*" component={NoMatch}/>

Redirect route

// v0.13.x
<Redirect from="some/where/:id" to="somewhere/else/:id" params={{id: 2}}/>

// v1.0
// 除了参数都放在路由上，其他都跟之前一样，
<Redirect from="/some/where/:id" to="/somewhere/else/2"/>

Links

path / params

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

// v0.13.x
<Link to="user" params={{userId: user.id}}>Mateusz</Link>

// v1.0
// 链接到整个路径，再也不用知道参数的名称并且字符串模板很美观大方
<Link to={`/users/${user.id}`}>Mateusz</Link>

Linking to Index routes

// v0.13.x
// with this route config<Route path="/" handler={App}> <DefaultRoute name="home" handler={Home}/>
  <Route name="about" handler={About}/></Route>// will be active only when home is active, not when about is active<Link to="home">Home</Link>// v1.0<Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/></Route>// will be active only when home is active, not when about is active<IndexLink to="/">Home</IndexLink>

"active" class

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

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

// v0.13.x
<Link to="about">About</Link>

// v1.0
<Link to="/about" activeClassName="active">About</Link>

Linking to Index routes

// v0.13.x
// with this route config
<Route path="/" handler={App}>
  <DefaultRoute name="home" handler={Home}/>
  <Route name="about" handler={About}/>
</Route>

// will be active only when home is active, not when about is active
<Link to="home">Home</Link>

// v1.0
<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="about" component={About}/>
</Route>

// will be active only when home is active, not when about is active
<IndexLink to="/">Home</IndexLink>

RouteHandler

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

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// 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 下也有，主要的不同在于没有参数或者路由名称，仅仅是路径名。

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...
<Route component={Assignment} />

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下获取东西的方法和如果是组件的话，现在获取方法

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

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

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