Yo-Router

简介

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

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

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

安装

使用 npm:

  1. $ npm install --save yo-router

示例

  1. import React, { Component } from 'react'
  2. import { render } from 'react-dom'
  3. import { Router, Route, Link, createBrowserHistory } from 'yo-router'
  5. // 创建历史
  6. const browserHistory = createBrowserHistory()
  8. const App = ({ children }) => <div>{children}</div>
  9. const About = () => <div>About</div>
  10. const NoMatch = () => <div>No Match!</div>
  12. const Users = ({ children }) => (
  13.   <div>
  14.     <h1>Users</h1>
  15.     <div className="master">
  16.       <ul>
  17.         {/* 使用 <Link> 标签进行方便的路由跳转 */}
  18.         {this.state.users.map(user => (
  19.           <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
  20.         ))}
  21.       </ul>
  22.     </div>
  23.     <div className="detail">
  24.       {children}
  25.     </div>
  26.   </div>
  27. )
  29. class User extends Component {
  30.   componentDidMount() {
  31.     this.setState({
  32.       // 对应页面内的组件将会获取 URL 参数，以便进行数据的获取和渲染
  33.       user: findUserById(this.props.params.userId)
  34.     })
  35.   }
  37.   render() {
  38.     return (
  39.       <div>
  40.         <h2>{this.state.user.name}</h2>
  41.       </div>
  42.     )
  43.   }
  44. })
  46. // 声明路由配置
  47. render((
  48.   <Router history={browserHistory}>
  49.     <Route path="/" component={App}>
  50.       <Route path="about" component={About}/>
  51.       <Route path="users" component={Users}>
  52.         <Route path="/user/:userId" component={User}/>
  53.       </Route>
  54.       <Route path="*" component={NoMatch}/>
  55.     </Route>
  56.   </Router>
  57. ), document.getElementById('root'))

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