axios请求过程中添加导航条

如果你的项目是基于React开发的，可以使用react-router-dom来实现导航条的添加。首先，你需要安装react-router-dom：

npm install react-router-dom

然后，在你的组件中引入以下组件：

import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

其中，Router是整个应用的路由容器，Route是路由配置组件，NavLink是用于创建导航链接的组件。

在render函数中，你可以使用NavLink来创建导航链接，并在Route中配置对应的组件：

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <NavLink exact to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
        <li>
          <NavLink to="/contact">Contact</NavLink>
        </li>
      </ul>
    </nav>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</Router>

这样，当你在页面中点击导航链接时，就会根据相应的Route配置加载对应的组件。你可以在组件中发起axios请求，并在请求完成后更新导航条的状态。例如：

import React, { useState, useEffect } from "react";
import axios from "axios";

function Home() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
      setData(res.data);
    });
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
}

在这个例子中，我们在Home组件中发起了一个axios请求，获取了一些数据，并在页面中渲染了这些数据。当请求完成后，导航条的状态也会相应地更新。