前端那些事之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

• http://www.ruanyifeng.com/blog/2016/05/react_router.html
• 指定版本：先安装 npm install --save react-router@3.0.0
• 最新版本4.1.1跳转不过去

hashHistory 是带#号的

• 例如：http://localhost:3000/#/aaa

browser history 后面是不带#号的

• 例如：http://localhost:3000/aaa

没有嵌套的路由

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;