react-router

基本的构建

import ReactRouter from 'react-router';
let {Route, Router, Link, IndexRoute} = ReactRouter.Route;
.....

let Nav = React.createClass({
  render () {
    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
      </div>
    )
  }
});

let App = React.createClass({
  render () {
    return (
      <div>
         <h1>App</h1>
         <Nav />
         {this.props.children || || 'welcome to app'}
      </div>
    )
  }
});

React.render((
  <Router>
    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='about' component={About}/>
      <Route path='inbox' component={Inbox}/>
    </Route>
  </Router>
), document.body);

嵌套组件结构

let Inbox = React.createClass({
  render () {
    return (
      <div>
       <h3>inbox</h3>
       {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
});

let Message = React.createClass({
  render() {
    var id = this.props.params.id;
    var datas = ['zero','one','two','three','four','five'];
    var data = datas[id] || 'none';
    var links = datas.map(function (data, index){
      return (<li key={index}><Link to={`/messages/{index}`} >{index}</Link></li>)
    })
    return (
      <div>
      {links}
      <h3>{data}</h3>
      </div>
    )
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      .....
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

整体组件的结构

URL	Components
/	App-> Home
/about	App -> About
/inbox	App -> Inbox
/inbox/messages/:id	App -> Inbox -> Message

URL和结构

• <link/>结构: <Link to="/inbox/messages/:id">Message</Link>

• 如果想在url上解耦，结构上仍然成为子组件，改成

<Route path="inbox" component={Inbox}>
    <Route path="/messages/:id" component={Message} />
 </Route>
//
<Link to="/messages/:id">Message</Link>

• 解耦后想把/inbox/messages/:id的连接跳转到/messages/:id;

<Route path="inbox" component={Inbox}>
   <Route path="/messages/:id" component={Message} />
   <Redirect from="messages/:id" to="/messages/:id" />
</Route>

钩子

• onEnter, onLeave

<Route path='about' component={About} onEnter={redirectToChild}/>

//
function redirectToChild(nextState, redirectTo, callBack) {
  redirectTo('/about', '', {nextPathname: nextState.location.pathname});
}

• 钩子函数结构

//EnterHook
type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any;`

type RouterState = {
  location: Location;
  routes: Array<Route>;
  params: Params;
  components: Array<Component>;
};

type RedirectFunction = (pathname: Pathname | Path, query: ?Query, state: ?LocationState) => void;

//LeaveHook
type LeaveHook = () => any;

路径匹配

<Route path="/hello/:name">         // matches /hello/michael and /hello/ryan
<Route path="/hello(/:name)">       // matches /hello, /hello/michael, and /hello/ryan
<Route path="/files/*.*">           // matches /files/hello.jpg and /files/path/to/hello.jpg

与上一版的具体变化

• v1.0.0

传入组件的参数

• 在配置好路径后, <Route>组件会将一下参数传入this.props

history: Object

• 常用history.pushState():来改变当前路径;

location: Object

• 当下路径解析后的参数对象;

params: Object

• 当前路径的param值;

route: Object

routeParams: Object

routes: Array