react-router学习之demo总结

目录

1. 准备

2. 实践总结

lesson1 ：项目准备与启动
lesson2 ：创建路由组件Router
lesson3 ：利用Link组件定义页面跳转标签
lesson4 ：路由组件Router的嵌套使用
lesson5 ：Link组件的激活状态(active)
lesson6 ：获取路由中的参数(param)
lesson7 ：多个页面跳转列表的嵌套与独立
lesson8 ：默认路由 Index Route
lesson9 ：默认跳转标签Index Link与 active
lesson10 ：Browser History实现浏览器URL的一致性
lesson11 ：添加node服务器，做项目后台
lesson12 ：使用js实现页面跳转
lesson13 ：服务器端渲染React方法
lesson14 ：扩展学习

准备

react-router官方demo教程
阮一峰：React Router 使用教程

推荐先学习官方教程，再看阮大的总结。

实践总结

lesson1 ：Setting up the Project

下载项目，进入目录，安装依赖项，启动项目

git clone https://github.com/reactjs/react-router-tutorial
cd react-router-tutorial
cd lessons/01-setting-up
npm install
npm start

lesson2 ：Rendering a Route

render(, document.getElementById('app'))

1. 创建Router元素，并且绑定到页面元素“app”。
2. Router元素是我们使用react-router库所创建出来的一个路由管理树，管理页面路由(path)与页面组件(component)之间的映射。
3. Router元素可单独提取成route.js文件

// 示例 
render((
  
    
    
    
  
), document.getElementById('app'))

lesson3 ：Navigating with Link

1. 使用react-router库中的Link组件，实现类似a标签的跳转。
2. Link组件与a标签的区别在于，Link组件可以与Router元素通信，告知当前渲染的路由与组件。

      
About
      
Repos

lesson4 ：Nested Routes

嵌套子路由，在一级路由的基础上添加二级路由。

lesson5 ：Active Links

1. 在react-router库中的Link组件的基础上，添加了提示当前路由的active样式。

// 二选一
// 1
About

// 2
About
.active {
  color: green;
}

2. 二度封装，简化使用

// 封装后的升级版Link组件
// modules/NavLink.js   
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
  render() {
    return 
  }
})

// 使用它吧~
// modules/App.js   
import NavLink from './NavLink'

About
Repos

lesson6 ：URL Params

根据通配符解析URL，获取URL中的参数。

// 定义Router元素的某个Route


// 解析URL
举例url： "/repos/reactjs/react-router"
// 获取参数
this.props.params.userName    ==>  reactjs
this.props.params.repoName    ==>  react-router

lesson7 ：More Nesting

两个跳转连接列表嵌套，实现两个active样式独立。一级Link与二级Link同时显示active效果。
实际效果如下图：

list1与list2两个列表相互独立，与url对应的Link标签同时处于“active”状态

lesson8 ：Index Routes

1. 使用IndexRoute库元素，为项目的this.props.children指定一个默认组件。
2. 当前路由为一级路由时，没有指定二级路由的组件，默认显示IndexRoute元素对应的组件。

import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import Home from './modules/Home'

render((
  
    
      
      
        
      
      
    
),document.getElementById('app'))

lesson9 ：Index Links

1. 添加path属性为“/”的Link组件之后，所有的路由都可归属于该Link，永远处于active状态(css样式、与Router的通信)。
2. 为了fix这个问题，将Link改为IndexLink。

// wrong
Home

// right
Home

lesson10 ：Clean URLs with Browser History

使用browserHistory库，控制浏览器显示的URL。

1. hashHistory库：浏览器URL状似“http://localhost:8080/#/?_k=blu8xi”，是生成的哈希值。
2. browserHistory库：浏览器URL与Router元素配置的path一致。

lesson11 ：Production-ish Server

1. 之前我们使用的用于启动项目的npm start命令，实际是利用了webpack-dev-server自动构建的服务器，但它仅适用于开发模式，不能用于生产模式。
2. 现在使用node的express框架，搭建一个项目node后台服务器，使能够在生产环境下运行项目。
3. 配合webpack打包工具与其插件，优化在开发环境下运行项目。

lesson12 ：Navigating Programatically

利用react-router库，完成页面跳转的两种方式。
方法一，使用browserHistory，向其中push一个目标路由：

import { browserHistory } from 'react-router'
  handleSubmit(event) {
    const path = `/repos/userName/repoName`;
    browserHistory.push(path)
  },

方法二，使用上下文(context)对象，向路由元素push一个目标路由：

export default React.createClass({
  // ask for `router` from context
  contextTypes: {
    router: React.PropTypes.object
  },

  handleSubmit(event) {
    const path = `/repos/userName/repoName`;
    this.context.router.push(path)
  },
})

lesson13 ：Server Rendering

服务端渲染

lesson14 ：Next

其他学习资料