路由
单页面应用
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>
)
}
}
页面效果: