react-router 学习笔记

🌙
手机阅读
本文目录结构

官方资料

浏览器支持

我们支持所有的浏览器和环境中运行 React。

安装

首先通过 npm 安装:

$ npm install --save react-router

然后使用一个支持 CommonJS 或 ES2015 的模块管理器,例如 webpack:

// 使用 ES6 的转译器,如 babel
import { Router, Route, Link } from 'react-router'

// 不使用 ES6 的转译器
var ReactRouter = require('react-router')
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var Link = ReactRouter.Link

也可以在 unpkg 上构建 UMD 格式:

<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>

你可以在 window.ReactRouter 找到这个库。

版本控制和稳定性

React Router 遵循语义化版本控制,并很好地诠释了它。我们希望 React Router 是一个稳定的依赖库,这样易于保持流行性。这是我们对你的应用的升级策略。

假设我们目前是 1.0 版本:

  • 2.0 完全向后兼容 1.0,所以你可以放心地升级,然后逐步更新你的代码。
  • 所有在 1.0 被弃用的 API 都会在控制台以 warn 的形式打印出来,并链接到升级指南。
  • 在 3.0 中将会完全移除 1.0 所弃用的东西。
  • 3.0 将发布不早于 2.0 三个月后。最坏的情况是,给你一个新的 API,你需要花费 6 个月的时间去完美升级。
  • 可以用 rackt/rackt-codemod 去自动升级你的代码

如果是完全向后兼容的,为什么这不是一个小版本呢?

如果我们不提供向后兼容性,然后你就不会问这个问题 —— 升级后的应用将不可运行。这不是我们想要的结果,我们想要平稳地,逐步地升级。

在实践中,这意味着你可以:

  • 从 1.0 升级到 2.0,你的应用仍可以运行。
  • 逐步更新你的代码到新的 API,在下一个版本发布之前,你有 3 个月的时间去完成。
  • 运行 codemods 去处理自动运行 (2) 部分。
  • 如果您的代码运行没有警告,你可以使用 3.0 版本重复这个列表

这看起来像什么?

import React from 'react'
import { Router, Route, Link } from 'react-router'

const App = React.createClass({/*...*/})
const About = React.createClass({/*...*/})
// 等等。

const Users = React.createClass({
  render() {
    return (
      <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">
          {this.props.children}
        </div>
      </div>
    )
  }
})

const User = React.createClass({
  componentDidMount() {
    this.setState({
      // 路由应该通过有用的信息来呈现,例如 URL 的参数
      user: findUserById(this.props.params.userId)
    })
  },

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

// 路由配置说明(你不用加载整个配置,
// 只需加载一个你想要的根路由,
// 也可以延迟加载这个配置)。
React.render((
  <Router>
    <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.body)

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang