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

前言

有些时候，我们想要点击左边的菜单栏，使右边的内容进行局部刷新。这时候我们就可以通过 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 (
      
        
          
          
          
          
          
        
      
    )
  }
}

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 (
      
        
          
            
              
                
                首页
               
            
            
              
                
                商家信息
              
            
            
              
                
                订单信息
              
            
          
        
        
        
送餐系统【商家端】
        
          

          {this.props.children}
          
        
      
      
    )
  }
}

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 (
      
        
          添加派送订单
        
      
    )
  }
}