前端之家收集整理的这篇文章主要介绍了
前端那些事之react篇---router路由，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前端路由的由来是利用location hash 锚点的值来跳转路由
<button id='aaa'>aaa</button>
<button id='bbb'>bbb</button>
<a href="#ccc">ccc</a><br/>
<a href="#ddd">ddd</a>
<scrtip>
aaa.onclick=function(){
location.hash = 'aaa'
}
bbb.onclick=function(){
location.hash = 'bbb'
}
window.addEventListener('hashchange',function(){
var hash=location.hash.slice(1)
console.log('hash to',hash);
},false)
</scrtip>
react-router学习教程参考 阮一峰react-router
hashHistory 是带#号的
browser history 后面是不带#号的
没有嵌套的路由
import React from 'react';
import {Router,Route,hashHistory} from 'react-router';
const Path=React.createClass({
render(){
return(
<div>path</div>
)
}
})
const Re = React.createClass({
render(){
return(
<div>
<Router history={hashHistory}>
<Route path="/" component={Path}/>
</Router>
</div>
)
}
})
const RouterStudy = React.createClass({
render(){
return (
<div>
<h3>react-router</h3>
<Re/>
</div>
)
}
})
export default RouterStudy;
路由的嵌套，总路由要加｛this.props.children｝属性
import React from 'react';
import {Router,hashHistory,borser} from 'react-router';
const App=React.createClass({
render(){
return(
<div>app
{this.props.children}
</div>
)
}
})
const Repos=React.createClass({
render(){
return(
<div>repos</div>
)
}
})
const About=React.createClass({
render(){
return(
<div>about</div>
)
}
})
const Re = React.createClass({
render(){
return(
<div>
<Router history={hashHistory}>
{/*嵌套路由*/}
<Route path="app" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
</div>
)
}
})
const RouterStudy = React.createClass({
render(){
return (
<div>
<h3>react-router</h3>
<Re/>
</div>
)
}
})
export default RouterStudy;
indexRoute的实现，默认情况下加载的，相当于Index.html
const Index = React.createClass({
render:function () {
return (
<div>
index
</div>
)
}
})
var R2 = React.createClass({
render:function () {
return (
<Router history={hashHistory}>
<Route path="/app" component={App}>
<IndexRoute component={Index}/>
<Route path="index" component={Index}/>
<Route path="repos2" component={Repos2}/>
<Route path="about2" component={About2}/>
<Redirect from='error' to="index"/>
</Route>
</Router>
)
}
})
const RouteStudy = React.createClass({
render:function () {
return(
<div>
<h3>react-router</h3>
<R2/>
</div>
)
}
})
react+ant desin + react-router
import React from 'react';
import ReactDom from 'react-dom';
import {
Router,Link,IndexRoute,IndexLink
}from 'react-router';
import Todo from './homework/todomvc'
import Component from './homework/component'
import Student from './homework/student'
import { Menu,Icon,Switch,Row,Col } from 'antd';
const SubMenu = Menu.SubMenu;
class Sider extends React.Component {
state = {
theme: 'dark',current: '1',}
changeTheme = (value) => {
this.setState({
theme: value ? 'dark' : 'light',});
}
handleClick = (e) => {
console.log('click ',e);
this.setState({
current: e.key,});
//把你要匹配的值放入hashHistory里
hashHistory.push(e.key)
}
render() {
return (
<div>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>请选择</span></span>}>
<Menu.Item key="todomvc"><Link to='todomvc'>todomvc</Link></Menu.Item>
<Menu.Item key="component"><Link to="component">component</Link></Menu.Item>
<Menu.Item key="student"><Link to="student">后台系统</Link></Menu.Item>
</SubMenu>
</Menu>
</div>
);
}
}
var R=React.createClass({
render:function(){
return(
<Router history={hashHistory}>
<Route path="/">
<IndexRoute component={Student}/>
<Route path='todomvc' component={Todo}/>
<Route path='component' component={Component}/>
<Route path='student' component={Student}/>
</Route>
</Router>
)
}
})
const RouterStudy=React.createClass({
render(){
return(
<div>
<Row>
<Col span={4}>
<Sider/>
</Col>
<Col span={20}>
<R/>
</Col>
</Row>
</div>
)
}
})
export default RouterStudy;
