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 現(xiàn)在被稱(chēng)為 histories（可發(fā)射位置）。可以從 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)

如果沒(méi)有指定一個(gè) history 的類(lèi)型（如上面的例子），那么你將到 1.0.0 后會(huì)發(fā)現(xiàn)一些不同尋常的行為。使用默認(rèn)的基于哈希的路由查詢(xún)字符串不由自己定義，將開(kāi)始出現(xiàn)在你的網(wǎng)址被稱(chēng)為_(kāi)k。例如會(huì)這樣：?_k=umhx1s

這是 createHashHistroy（也就是，如果沒(méi)有指定一個(gè)默認(rèn)的 history 方法） 的一部分。

Route Config

你還是可以跟以前一樣嵌套路由，路徑還是跟以前一樣繼承自父母，但是支柱的名稱(chēng)改變了。

// 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
// 除了參數(shù)都放在路由上，其他都跟之前一樣，
<Redirect from="/some/where/:id" to="/somewhere/else/2"/>

Links

path / params

如果學(xué)過(guò) angular 的同學(xué)對(duì)這部分的改變會(huì)比較的熟悉，并會(huì)對(duì)此大贊！！

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

// v1.0
// 鏈接到整個(gè)路徑，再也不用知道參數(shù)的名稱(chēng)并且字符串模板很美觀大方
<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 版本，鏈接默認(rèn)的添加active類(lèi)，你可以覆蓋activeClassName ，或提供activeStyles 。通常只是少數(shù)人需要的這種導(dǎo)航。

鏈接不再默認(rèn)添加active類(lèi)（因?yàn)槌杀据^高并且通常不必要），你可選擇設(shè)置一個(gè)。如果activeClassName或者activeStyles都沒(méi)有設(shè)置，那么鏈接就不會(huì)自動(dòng)檢測(cè)它的是否 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

沒(méi)有RouteHandler 了. Router在是動(dòng)態(tài)的路由的基礎(chǔ)上，自動(dòng)在你組件的this.props.children里。

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

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

這種寫(xiě)法有一點(diǎn)語(yǔ)義上的改變。React 在當(dāng)元素被創(chuàng)建時(shí)候驗(yàn)證propTypes，比當(dāng)它們即將被渲染的時(shí)候好。
更多詳情，看這里：
facebook/react#4494.

Navigation Mixin

If you were using the Navigation mixin, use the History mixin instead.
Navigation mixin，現(xiàn)在用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 下也有，主要的不同在于沒(méi)有參數(shù)或者路由名稱(chēng)，僅僅是路徑名。

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
  }
})

下表展示了你過(guò)去在Statemixin下獲取東西的方法和如果是組件的話，現(xiàn)在獲取方法

下表是過(guò)去通過(guò)State獲取屬性方法，和現(xiàn)在如果不是組件的情況下獲取的方法對(duì)比

注意：在 v1.0 不是所有的State功能都有。例如，params通過(guò)上下文是沒(méi)用的。

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