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 (
        <div className="App">
            <BrowserRouter>
                <Routes>
                        <Route exact path="/users" element={<UserList/>}/>
                        <Route exact path="/user/:id" element={<UserDetail/>}/>
                </Routes>
            </BrowserRouter>
        </div>
    );
}

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 (
        <div>
            <h1>user list</h1>
            <ul>
                {state.isLoading === false && state.val.map(user => (
                    <li key={user.id}><Link to={'/user/' + user.id}>{user.name}</Link></li>
                ))}
            </ul>
        </div>
    )


}

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 (<div>
        {state.val && 'username:' + state.val.name}
    </div>)
}