React-router 初学者的14个lessons

Lesson1
1、首先确保安装了Node.js和npm依赖包管理工具
2、在git上克隆官方示例程序

git clone https://github.com/reactjs/react-router-tutorial

cd react-router-tutorial

cd lessons/01-setting-up

npm install

npm start

运行完成后打开：http://localhost:8080
就可以在浏览器看见： "Hello React Router"
打开modules/App.js，更改里面内容，可以看到浏览器上的内容随时变化！

Lesson2 : rendering a router
1、打开index.js
首先import Router、Route和hashHistory，然后render Reouter替换原来的App组件。这是由于：React Router 是一个组件。Router 本身是一个容器，真正的路由都要由Route去定义。
// ...

import { Router, Route, hashHistory } from 'react-router'

render((

), document.getElementById('app'))

上面访问的路由为“/”，组件是App。路由的切换由URL得hash变化决定，即URL的#部分发生变化。
2、添加Scene
.modules/About.js
.modules/Repos.js
// modules/About.js

import React from 'react'export

default React.createClass({ render() { return

About

}})

// modules/Repos.js

import React from 'react'export

default React.createClass({ render() { return

Repos

}})

把场景添加到路由里面
// insert into index.js

import About from './modules/About'

import Repos from './modules/Repos'

render((

{/* add the routes here */}

), document.getElementById('app'))

现在访问： http://localhost:8080/#/about 和 http://localhost:8080/#/repos

Lesson3 Navigating with Link
Link类似于之前用过的标签
// modules/App.js

import React from 'react'import { Link } from 'react-router'

export default React.createClass({

render() {

return (

React Router Tutorial

About

Repos

) }})

访问：http://localhost:8080

lesson4 嵌套的路由
这个功能可以做出类似Nav的功能，Route里面可以嵌套多个Route
// index.js// ...

render((

{/* make them children of App */}

), document.getElementById('app'))

在App里面
// modules/App.js// ...

render() {

return (

React Router Tutorial

About

Repos

{/* add this */}

{this.props.children}

) }

则UI结构如下：

Lesson 5 Active Links
通过行内样式表改变Link的样式：
// modules/App.js

About

Repos

也可以添加className在css文件中设置样式
// modules/App.js

About

Repos

创建css文件，并在index.html中引入
// index.html

我们不用为每个Link都添加activeClassName，这里我们使用一个spread operator
创建modules/NavLink.js
// modules/NavLink.js

import React from 'react'

import { Link } from 'react-router'

export default React.createClass({

render() {

return

}

})

在modules/App.js中这样写：
// modules/App.js

import NavLink from './NavLink'

About

Repos

Lesson 6 URL Params
1、添加一个带参数的路由
建立一个文件：modules/Repo.js
// modules/Repo.js

import React from 'react'

export default React.createClass({

render() {

return (

{this.props.params.repoName}

)

}})

2、在index.js里面添加新路由
// import Repo

import Repo from './modules/Repo'

render((

{/* add the new route */}

), document.getElementById('app'))

3、在Repo.js里面添加跳转的Link
// Repos.js

import { Link } from 'react-router'

export default React.createClass({

render() {

return (

Repos

{/* add some links */}

React Router

React