React 实现列表页和列表详情页功能

1.简介

本篇文章将会基于react 实现列表页和列表详情的功能，后续会完善更多的功能细节。

2.实现

a.app.js

 入口类，实现路由功能

import './App.css';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import {UserList} from "./page/user-list";
import {UserDetail} from "./page/user-detail";

function App() {
    return (
        

            
                
                        }/>
                        }/>
                
            
        
    );
}

export default App;

b.user-list.js

列表页

import {useRequest} from "../hook/http";
import {useEffect} from "react";
import {Link} from "react-router-dom"

export const UserList = () => {

    const {state, doRequest} = useRequest();


    useEffect(() => {
        doRequest('http://vicyor.com/crm/users', {page: 1, pageSize: 20}, {}, 'POST')
    }, []);

    return (
        

            
user list
            

                {state.isLoading === false && state.val.map(user => (
                    
{user.name}
                ))}
            
        
    )


}

c.user-detail.js

import {useEffect} from "react";
import {useRequest} from "../hook/http";

export const UserDetail = ({match}) =>{
    const {state, doRequest} = useRequest();
    useEffect(()=> {
        doRequest('http://vicyor.com/user/1', {}, {}, 'POST')
    },[])

    return (

        {state.val && 'username:' + state.val.name}
    
)
}