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>)
}