Name: Yo-Router
Author: 羊先生

快速了解

完整资料

资料已展开

关于 Yo-Router

状态提示： 最近一次检测未能正常访问官网，该工具可能已经停止服务。以下内容作为历史资料保留。

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

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

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

安装

js 复制代码

npm install --save yo-router

js 复制代码

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

适合的使用方向

安装

Yo-Router 一方面继承了 React-Router 的特点，提供了声明式的方式来创建路由，且保证 UI 的显示与 URL 切换的同步

主要用途

适用方向

适合编码、调试、测试、接口联调和工程效率提升等开发场景。

收录线索

已停用前端路由React路由软件 / 应用

资料说明

内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。