React 路由的简单使用

在我的上一篇文章搭建React空项目中已经介绍了如何安装路由相关依赖，这里不说了。直接开整。

需求是这样的，写一个登录界面，一个主界面。登录界面点击登录以后跳转到主界面去。这其中的后台验证等逻辑就先不要了。只要点击立即跳转就可以。 

代码

登录界面Login

import './index.css'
import React, {Component} from 'react'
import { Form, Input, Button, Checkbox } from 'antd';

export default class Login extends Component {
    constructor(props) {
        super(props);
    }

    onFinish = () => {

    }

    doLogin = () => {
        this.props.history.push({
            pathname: '/home',
            state: {}
        })
    }

    onFinishFailed = () => {

    }

    render() {
        return(
            <div className='login'>
                <Form
                    name="basic"
                    className='form'
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked">
                        <Checkbox>记住密码</Checkbox>
                    </Form.Item>

                    <Form.Item >
                        <div className='btn-div'>
                            {/* 特别注意一下这里onClick中函数的写法就好了。如果写this.doLogin等于调用函数，也就是说页面加载以后，这句话会立即调用。而下面这种写法相当于给onClick事件传入匿名函数，当触发点击事件的时候才会触发 */}
                            <Button type="primary" htmlType="submit" onClick={() => this.doLogin()}>登 录</Button>
                            &nbsp;&nbsp;
                            <Button htmlType="reset">重置</Button>
                        </div>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

 

主页面Home

import React, {Component} from "react";
import { Layout, Menu } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;

export default class Home extends Component{
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
        }
    }

    render(){
        return(
            <div>
                <Layout className='framework'>
                    <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                        <div className="logo" />
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1" icon={<UserOutlined />}>
                                项目
                            </Menu.Item>
                            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                                用户
                            </Menu.Item>
                            <Menu.Item key="3" icon={<UploadOutlined />}>
                                引擎
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout">
                        <Header className="site-layout-background" style={{ padding: 0 }}>
                            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: this.toggle,
                            })}
                        </Header>
                        <Content
                            className="site-layout-background"
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                            }}
                        >
                            图表
                        </Content>
                    </Layout>
                </Layout>
            </div>
        )
    }

}

在App.js文件中将两个写好的组件管理起来

import './App.css';
import React, {Component} from "react";
//引入两个页面
import Login from "./pages/login";
import Home from './pages/home'
import {HashRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            //注意这里需要使用一个路由器将下面要写的路由包裹起来
            <Router>
                <div className="App">
                    {/* switch是一个路由工具，表示被包裹的n个路由组件在同一时刻只会显示其中之一 */}
                    <Switch>
                        <Route path="/login" component={Login}/>
                        <Route path="/home" component={Home}/>
                        {/* 如果输入的是根路径，重定向到登录页面 */}
                        <Route path="/" render={() => <Redirect to="/login"/>}/>
                    </Switch>

                </div>
            </Router>
        );
    }
}

export default App;