react-router-dom@6 简单实用和axios最佳实践react-router-dom@6 简单实用和axi

1. 安装 react-rom-router

yarn add react-router-dom @6

使用最新的react-router-dom @6版本

2. 修改Index.tsx

使用BrowserRouter 进行嵌套。

  <React.StrictMode>
    <BrowserRouter>
      <App /> 
    </BrowserRouter>
  </React.StrictMode>

3. 首页定义路由

我这里就四个页面，直接在App中定义四个Route即可。

    <div className="App">
      <Routes>
        <Route path="/" element={<Index/>} />
        <Route path="/list" element={<List/>} />
        <Route path="/insert" element={<Insert/>} />
        <Route path="/detail/:id" element={<Detail/>} />
      </Routes>
    </div>

3、路由跳转

在Index中输入对应的信息之后，点击按钮，会进行跳转。

这里需要导入useNavigate，并使用navigate("/xxx")的方式进行页面跳转

import {useNavigate} from 'react-router-dom'

export default function Index() {
  const [name, setName] = useState('');
  const navigate =  useNavigate()

  // 按钮触发的函数
  const ok = ()=> {
    if (name == "") {
      message.error("请输入姓名")
      return 
    }
    localStorage.setItem("student_name", name) // 放入本地缓存中
    navigate("/list")
  }
}

4、带参数的跳转

使用link标签

import {Link} from "react-router-dom"

使用navigate也能达到对应的效果。

参数的接收：

import {useParams} from 'react-router-dom'

export default function Detail() {
  let params = useParams();

  const [info, setInfo] = useState<StudenInfo>();
  useEffect(() => {
    console.log(params.id || "[]");
  },[]);
}

react-router-dom 大量的采用hooks的写法，所以提倡使用hooks的写法。

5.Axios 最佳实践

安装：

yarn add axis

一般在src/api目录下创建index.ts，统一管理项目中所有的网络请求

我这里存在三个请求，所以就定义了三个方法：

import { post, get } from '../utils/req';

export default {
  savaApplyInfo(data = {}) {
    return post('/save', data);
  },
  getByID(ID: string) {
    return get(`/get/id/${ID}`);
  },
  getByName(name: string) {
    return get(`/get/name/${name}`);
  },
}

req.ts:

import Axios from 'axios';
import { message } from 'antd';

export const post = (url: string, params = {}) => {
  const options  = Object.assign({}, {data: params}, {method: 'post', url});
  return request(url, options) as any;
}

export const get = (url: string, params = {}) => {
  const options = Object.assign({}, { params }, { method: 'get', url });
  return request(url, options) as any;
};

const requestConfig = {
  timeout: 1000 * 60 * 3,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
  baseURL: 'http://ip:6644/'
};

const request = (_url: string, options: any) => {
  const config = Object.assign({}, requestConfig, options);
  return new Promise((resolve, reject) => {
    Axios(config)
      .then((response) => {
        const { code, msg, data } = response.data;
        if (code === 1000) {
          resolve(data);
        } else {
          message.error(msg);
        }
      })
      .catch((e) => {
        reject(e);
      });
  });
};

requestConfig可以配置不同的axios参数。

需要根据后台不同的返回，修改then中的判断内容，如上面的代码所示，我后台返回正确处理的状态码是1000，所以可以这样进行判断。