阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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)
      
      目录
      目录