react 路由基础实现3.x版本

路由
	单页面应用

	1、安装
		cnpm install --save react-router@3.x

	2、在主入口文件引入
		import {Router,Route,hashHistory,IndexRoute} from "react-router"
		import xxx from xx  //引入路由要加载的组件

		其中:
		 在Router内的Route为路由,hashHistory帮助管理历史记录,写在Router标签中


	3、写路由
		<Router history={hashHistory}>
			<Route path="路由加载地址即js中的路由设置,/表示首页" component={组件名}>
		</Router>

	4、点击跳转路由(点击后link标签消失)
		第一种a标签(一般不使用):
			(1)通过a标签实现,在主页面,添加a标签
			(2)不同a标签的href对应不同路由名,因页面上的路由名前还加了个#,所以href应该为"#/..."
		第二种link标签(内部有优化):
			(1)在路由所对应组件的文件引入(不能在含有路由的入口文件引入,会报错)
				import {Link} from 'react-route'
			(2)在路由所对应组件的文件中,将a标签换成Link标签,href换成to,且href对应值不加#

	5、使Link跳转一直存在优化写法
		将跳转内容放进组件里,然后各个路由对应的组件中加载这个组件即可实现

代码示例:
主入口文件:

import React ,{Component}from 'react';
// import User from './user'
import {Router,Route,hashHistory,IndexRoute,Link} from "react-router"
import Page from "./dpp"
import Two from './2'
import Three from "./3"

class App extends Component {

  render()
  {
    return (


        <div>
          
         
          <Router history={hashHistory}>
            <Route path="/" component={Page}></Route>
            <Route path="/two" component={Two}></Route>
            <Route path="/three" component={Three}></Route>
          </Router>

        </div>
      )
  }
}

export default App;

路由跳转组件:

import React ,{Component}from 'react';
import {Link} from 'react-router'

export default class Links extends Component{
	render()
	{
		return(
			<ul>
              <li><Link to="/">首页</Link></li>
              <li><Link to='/two'>第二页</Link></li>
              <li><Link to='/three'>第三页</Link></li>
            </ul>
		)
	}
}

路由组件1:

import React ,{Component}from 'react';
import Links from './link'
class Page extends Component {

  render()
  {
    return (

        <div>
        	<Links/>
         首页 

        </div>
      )
  }
}

export default Page;

路由组件2

import React,{Component} from "react"
import Links from './link'
export default class Two extends Component{

	render()
	{
		return(
			<div>
				<Links/>
			第二页

			</div>
		)
	}
}

路由组件三

import React,{Component} from "react"
import Links from './link'
export default class Three extends Component{

	render()
	{
		return(
			<div>
				<Links />
			第三页

			</div>
		)
	}
}

页面效果: