React 项目记录（五）——React 实现局部刷新

￡神魔★判官ぃ 2022-03-25 12:06 2477阅读 0赞

## 前言 ##

有些时候，我们想要点击左边的菜单栏，使右边的内容进行局部刷新。这时候我们就可以通过 react router 来实现。进入页面的流程分为：入口文件->路由->菜单->需要局部刷新的页面

## Step 1：配置路由 ##

我们首先在路由配置文件中，配置路由路径

import React, { Component } from 'react'
    import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
    import '@/style/style.scss'
    import SiteIndex from '@/page/site/store'
    import Home from '@/coms/store/home'
    import Store from '@/coms/store/store'
    import Order from '@/coms/store/order'
    import AddOrder from '@/coms/store/addOrder'
    import Login from '@/page/site/login'
    
    export default class App extends Component {
      render () {
        return (
          <Router basename="/">
            <Switch>
              <Route exact path='/' component={Login} />
              <Route path='/store/home' component={Home} />
              <Route path='/store/store' component={Store} />
              <Route path='/store/order' component={Order} />
              <Route path='/store/addorder' component={AddOrder} />
            </Switch>
          </Router>
        )
      }
    }

## Step 2：配置菜单 ##

import React, { Component } from 'react'
    import {Menu, Icon, Layout, Input, Button} from 'antd'
    import 'antd/dist/antd.css'
    import { Link } from 'react-router-dom'
    
    const { Header, Sider, Content } = Layout;
    export default class Index extends Component {
      constructor (props) {
        super(props)
        this.state = {}
      }
    
      componentDidMount () {
      }
    
      render () {
        return (
          <Layout>
            <Sider style={
       {overflow: 'auto', height: '100vh', position: 'fixed', left: 0,}}>
              <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
                <Menu.Item key="1">
                  <Link to="/store/home">
                    <Icon type="home" />
                    <span className="nav-text">首页</span>
                  </Link> 
                </Menu.Item>
                <Menu.Item key="2">
                  <Link to="/store/store">
                    <Icon type="user" />
                    <span className="nav-text">商家信息</span>
                  </Link>
                </Menu.Item>
                <Menu.Item key="3">
                  <Link to="/store/order">
                    <Icon type="profile" />
                    <span className="nav-text">订单信息</span>
                  </Link>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout style={
       { marginLeft: 200 }}>
            <Header style={
       { background: '#fff', padding: 0 ,textAlign: 'center',fontSize:'30px'}}>送餐系统【商家端】</Header>
            <Content style={
       { margin: '24px 16px 0', overflow: 'initial' }}>
              <div style={
       { padding: 24, background: '#fff', textAlign: 'center' }}>
              {this.props.children}
              </div>
            </Content>
          </Layout>
          </Layout>
        )
      }
    }

## Step 3：局部刷新的页面 ##

import React, { Component } from 'react'
    import BasicLayout from '@/page/site/store';
    import { Button } from 'antd'
    import { Link } from 'react-router-dom'
    
    export default class Home extends Component {
      render () {
        return (
          <BasicLayout>
            <Link to="/store/addorder">
              <Button icon="plus" size="large" style={
       {margin: '100px 0'}}>添加派送订单</Button>
            </Link>
          </BasicLayout>
        )
      }
    }