React路由管理之React Router总结 React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。 React Router是做什么的呢,官方的介绍是: A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought. 大意即:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。 下面是一些React Router的用法: 一 简单渲染Route 有一点需要牢记于心,Router 是作为一个React组件,可以进行渲染。 // ... import { Router, Route, hashHistory } from 'react-router' render((
), document.getElementById('app')) 这里使用了hashHistory - 它管理路由历史与URL的哈希部分。 添加更多的路由,并指定它们对应的组件 import About from './modules/About' import Repos from './modules/Repos' render((
), document.getElementById('app')) 二 Link // modules/App.js import React from 'react' import { Link } from 'react-router' export default React.createClass({ render() { return (