React request partial refresh implementation method: 1. Introduce layout and sub-components; 2. Assign routing, code such as "const BasicRoute = () => (...)"; 3. Define the link of the project ; 4. Wrap it with the "BasicLayout" tag and pass the content to the "this.props.children" part of "layout.js".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to request partial refresh in react?

React implements partial refresh

[Project structure]

Process: Entry file-> Routing-> layout -> Analysi/Monitor/Workspace

1. Entry file-> src/index.js

2. Component-> src/coms

3. Layout-> src/layout

4. Routing-> src/routes

##[Process Analysis]

Process: Entry file-> Routing-> layout -> Analysi/Monitor/Workspace

1. Routing part

//import React from 'react'; 引入类 //import { Component } from 'react'; 引入对象 import React, { Component } from 'react'; import {HashRouter, Route, Switch} from 'react-router-dom'; //引入布局和子组件 import BasicLayout from '../layout/layout'; import Analysis from '../coms/Analysis'; import Monitor from '../coms/Monitor'; import Workplace from '../coms/Workplace'; //分配路由 const BasicRoute = () => (         ); export default BasicRoute;

2. Layout part (

Key)

import React, { Component } from 'react'; import {Layout ,Menu,Icon} from 'antd'; import { Router, Route, Link,HashRouter } from 'react-router-dom' import 'antd/dist/antd.min.css' import BasicRoute from '../routes/router'; const { Header, Footer, Sider, Content } = Layout; export default class BasicLayout extends Component { render() { return (    {/*定义了项目的link，会按照路由走*/} Item1    
Header
  
 {/*Analysis.js文件引用了BasicLayout，并把自己的全部子节点(子组件)传过来*/} {this.props.children} 
     ) } }

3. Subcomponent (Analysis.js) (

Error point)

import React from 'react'; import BasicLayout from '../layout/layout'; export default () => { //用BasicLayout标签包裹，内容传到layout.js的this.props.children部分 return (
Analysis Page) }

[Effect]

[Summary]

Following the tutorial on the antd official website, I found that it cannot be partially refreshed

The reason is that the official website uses the umi framework. I configured it myself, but there were many omissions, resulting in subcomponents not being passed to the layout correctly.

Recommended learning: "

react video tutorial"

The above is the detailed content of How to request partial refresh in react. For more information, please follow other related articles on the PHP Chinese website!