Yo-Router #

简介 #

Yo-Router 是基于 React Router 实现的一个路由库。

Yo-Router 一方面继承了 React-Router 的特点，提供了声明式的方式来创建路由，且保证 UI 的显示与 URL 切换的同步；同时还重写了 History 模块，让路由能自由的在 SPA/多页 下进行切换，并提供统一的生命周期管理与数据传递方式。

同时还支持异步路由的方式，可以让你的页面资源异步加载，提升大型应用的页面加载效率。

安装 #

使用 npm:

$ npm install --save yo-router

示例 #

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, createBrowserHistory } from 'yo-router'

// 创建历史
const browserHistory = createBrowserHistory()

const App = ({ children }) => <div>{children}</div>
const About = () => <div>About</div>
const NoMatch = () => <div>No Match!</div>

const Users = ({ children }) => (
  <div>
    <h1>Users</h1>
    <div className="master">
      <ul>
        {/* 使用 <Link> 标签进行方便的路由跳转 */}
        {this.state.users.map(user => (
          <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
        ))}
      </ul>
    </div>
    <div className="detail">
      {children}
    </div>
  </div>
)

class User extends Component {
  componentDidMount() {
    this.setState({
      // 对应页面内的组件将会获取 URL 参数，以便进行数据的获取和渲染
      user: findUserById(this.props.params.userId)
    })
  }

  render() {
    return (
      <div>
        <h2>{this.state.user.name}</h2>
      </div>
    )
  }
})

// 声明路由配置
render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.getElementById('root'))

更多的使用方法，可以参考我们的例子：Demo。