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