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

最新推荐文章于 2025-04-13 11:08:14 发布

怪力马猴烧酒

最新推荐文章于 2025-04-13 11:08:14 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 记录文章标签： node react js

本文链接：https://blog.youkuaiyun.com/August_leo/article/details/86566450

React 记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用 React Router 实现页面的局部刷新。通过配置路由、设置菜单和指定局部刷新的页面，点击菜单时，右侧内容可以实现不刷新整个页面的情况下更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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