美文网首页react环境
7.引入路由router

7.引入路由router

作者: 大月山 | 来源:发表于2017-11-01 13:48 被阅读11次

    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
    

    相关文章

      网友评论

        本文标题:7.引入路由router

        本文链接:https://www.haomeiwen.com/subject/lwzwpxtx.html