7.引入路由router

react-router 4.0

配置使用router

安装react-router

npm install react-router-dom --save

修改/app/app.js

import './index.html';

import React from 'react';
import ReactDom from 'react-dom';
import App from './component/App';
import {BrowserRouter, Route} from 'react-router-dom';

ReactDom.render(
    <BrowserRouter>
        <Route path="/" component={App}/>
    </BrowserRouter>
    ,
    document.getElementById('root')
);

修改/app/component/App.js

import React from 'react';
import Home from './Home';
import Login from './user/Login';
import {Route} from 'react-router-dom';
import '../style/app.scss';

class App extends React.Component {
    componentDidMount() {
        const {
            location,
            history
        } = this.props;
        if (location.pathname === '/home' || location.pathname === '/') {
            history.replace('/home')
        } else if (location.pathname === '/login') {
            history.replace('/login')
        }
    }

    render() {
        return (
            <div className="app">
                <Route path="/home" component={Home}/>
                <Route path="/login" component={Login}/>
            </div>
        )
    }
}

export default App;

添加/app/component/home/Home.js

import React from 'react';
import {matchPath} from 'react-router-dom';
import Header from './layout/Header';
import Content from './layout/Content';
import Sidebar from './layout/Sidebar';
import {Layout} from 'antd';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false
        };
        this.ress = ['content01', 'content02', 'content03'];
        this.res = null;
        const match = matchPath(this.props.history.location.pathname, {
            path: '/home/:res'
        });
        if (match) {
            this.res = match.params.res;
        }

        this.toggle = () => {
            this.setState({
                collapsed: !this.state.collapsed
            })
        };
    }

    componentWillMount() {
        if (!this.res || !this.res.length || this.ress.indexOf(this.res) === -1) {
            this.props.history.replace(`/home/content01`)
        }
    }

    render() {
        return (
            <Layout className="layout-app">
                <Layout.Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                >
                    <Sidebar res= {this.res}/>
                </Layout.Sider>
                <Layout>
                    <Layout.Header style={{background: '#fff', padding: 0}}>
                        <Header collapsed={this.state.collapsed}
                                toggle={this.toggle}
                        />
                    </Layout.Header>
                    <Layout.Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>
                        <Content/>
                    </Layout.Content>
                </Layout>
            </Layout>
        )
    }
}
export default Home;

添加/app/component/login/Login.js

import React from 'react';
import {Form, Icon, Input, Button, Checkbox} from 'antd';
const FormItem = Form.Item;

class Logining extends React.Component {
    constructor(props) {
        super(props);

        this.handleSubmit = (e) => {
            const {
                history
            } = this.props;

            e.preventDefault();
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    if (values.userName === 'admin' && values.password === '123456') {
                        history.replace('/home')
                    }
                    console.log('Received values of form: ', values);
                }
            });
        }
    }

    render() {
        const {
            getFieldDecorator
        } = this.props.form;

        return (
            <div className="login">
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                        {getFieldDecorator('userName', {
                            rules: [{required: true, message: 'Please input your username!'}],
                        })(
                            <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="Username"/>
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{required: true, message: 'Please input your Password!'}],
                        })(
                            <Input prefix={<Icon type="lock" style={{fontSize: 13}}/>} type="password"
                                   placeholder="Password"/>
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: true,
                        })(
                            <Checkbox>Remember me</Checkbox>
                        )}
                        <a className="login-form-forgot" href="">Forgot password</a>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                        Or <a href="">register now!</a>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

const Login = Form.create()(Logining);

export default Login;

修改/app/component/layout/Sidebar.js

import React from 'react';
import {Menu, Icon} from 'antd';
import {Link} from 'react-router-dom';

class Sidebar extends React.Component {
    render() {
        const {
            res
        } = this.props;
        return (
            <div className="layout-sidebar">
                <div className="logo"/>
                <Menu theme="dark"
                      mode="inline"
                      defaultSelectedKeys={[res]}
                >
                    <Menu.Item key="content01">
                        <NavLink to="/home/content01">
                            <Icon type="user"/>
                            <span>nav 1</span>
                        </NavLink>
                    </Menu.Item>
                    <Menu.Item key="content02">
                        <NavLink to="/home/content02">
                            <Icon type="video-camera"/>
                            <span>nav 2</span>
                        </NavLink>
                    </Menu.Item>
                    <Menu.Item key="content03">
                        <NavLink to="/home/content03">
                            <Icon type="upload"/>
                            <span>nav 3</span>
                        </NavLink>
                    </Menu.Item>
                </Menu>
            </div>
        )
    }
}

export default Sidebar;

修改/app/component/layout/Content.js

import React from 'react';
import {Route} from 'react-router-dom';
import Content01 from '../content/content01';
import Content02 from '../content/content02';
import Content03 from '../content/content03';

class Content extends React.Component {
    render() {
        return (
            <div>
                <Route path="/home/Content01" component={Content01}/>
                <Route path="/home/Content02" component={Content02}/>
                <Route path="/home/Content03" component={Content03}/>
            </div>
        )
    }
}
export default Content;

修改/app/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/"> 
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
<div id="root"></div>
<script src="./app.js"></script>
</body>
</html