react-router使用教程关于url中#的作用:学习: http://www.ruanyifeng.com/blo...'#'代表网页中的一个位置。其右面的字符，就是该位置的标识符改变#不触发网页重载改变#会改变浏览器的访问历史window.location.hash读取#值window.onhashchange = func 监听hash改变reat-routergithub主页: https://github.com/ReactTrain...官网教程: https://github.com/reactjs/re...官方教程)一峰教程: http://www.ruanyifeng.com/blo...react-router库中的 相关组件包含的相关组件:Router: 路由器组件, 用来包含各个路由组件,用来管理路由Route: 路由组件, 注册路由IndexRoute: 默认路由组件hashHistory: 路由的切换由URL的hash变化决定，即URL的#部分发生变化Link: 路由链接组件，生成a标签的Router: 路由器组件属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配子组件: RouteRoute: 路由组件属性1: path="/xxx"属性2: component={Xxx}根路由组件: path="/"的组件, 一般为App子路由组件: 子<Route>配置的组件IndexRoute: 默认路由当父路由被请求时, 默认就会请求此路由组件hashHistory用于Router组件的history属性作用: 为地址url生成?_k=hash, 用于内部保存对应的stateLink: 路由链接属性1: to="/xxx"属性2: activeClassName="active"下载相关插件：npm install react-router@3 --save编码定义各个路由组件About.jsimport React from 'react'function About() { return <div>About组件内容</div>}export default AboutHome.jsimport React from 'react'function Home() { return <div>Home组件内容2</div>}export default HomeRepos.jsimport React, {Component} from 'react'import {Link} from 'react-router';export default class Repos extends Component { constructor(props){ super(props); this.state = { repos : [] } } componentDidMount(){ let repos = [ {name : 'facebook', repo : 'yarn'}, {name : 'facebook', repo : 'react'}, {name : 'google', repo : 'angular'}, {name : 'antd', repo : 'antd'}, ]; this.setState({repos}); } render() { return ( <div> <h3>Repos 组件</h3> <ul> { this.state.repos.map((item, index) => { return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li> }) } </ul> {this.props.children} </div> ) }}定义应用组件: App.jsimport React from 'react';import {Link} from 'react-router'class App extends React.Component{ render(){ return ( <div> <h2>Hello, React Router!</h2> <ul> <li><Link to="/about">about</Link></li> <li><Link to="/repos">repos</Link></li> </ul> {this.props.children} </div> ) }}export default App;定义入口JS: index.js-->渲染组件import React from 'react';import ReactDOM from 'react-dom';import {Router, Route, hashHistory, IndexRoute} from 'react-router';import App from './components/App/App';import About from './components/About/About';import Repos from './components/Repos/Repos';import Home from './components/Home/Home';import Repo from './components/Repo/Repo';ReactDOM.render( ( <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Home}></IndexRoute> <Router path="/about" component={About}></Router> <Router path="/repos" component={Repos}> <Route path="/repos/:name/:repo" component={Repo}></Route> </Router> </Route> </Router> ), document.getElementById('root'));主页面: index.html<style> .active { color: red; }</style><div id='root'></div>传递请求参数repo.js: repos组件下的分路由组件import React from 'react'; function Repo({params}) { return <p>用户名:{params.name}, 仓库名:{params.repo}</p> } export default Repo;repos.jsimport React, {Component} from 'react'import {Link} from 'react-router';export default class Repos extends Component { constructor(props){ super(props); this.state = { repos : [] } } componentDidMount(){ let repos = [ {name : 'facebook', repo : 'yarn'}, {name : 'facebook', repo : 'react'}, {name : 'google', repo : 'angular'}, {name : 'antd', repo : 'antd'}, ]; this.setState({repos}); } render() { return ( <div> <h3>Repos 组件</h3> <ul> { this.state.repos.map((item, index) => { return <li key={index}><Link to={`/repos/${item.name}/${item.repo}`}>{item.repo}</Link></li> }) } </ul> {this.props.children} </div> ) }}
