axios 如何在渲染路由之前调用API并接收其信息？

zy1mlcev 于 2023-10-18 发布在 iOS

关注(0)|答案(2)|浏览(119)

我有一个React应用程序，定义了一些公共/私有路由，我需要将用户信息传递到私有路由中。我尝试调用API（返回用户详细信息）并在呈现路由之前接收它，但无法使其工作-路由在获得响应之前被呈现，因此用户获得空值。在这个例子中，我试着使用了callc/await，但没有成功。或者如果有人知道更好的方法。谢谢你，谢谢

export const Routes = () => {

    const user = axios.get('/login').then(function(res) { return res })

    return (
        <Switch>
            <PrivateRoute exact path="/" component={Home} user={user} />
            <Route component={Error404} />
        </Switch>
    )
}

axios

来源：https://stackoverflow.com/questions/58676644/how-to-call-the-api-and-receive-its-information-before-rendering-the-routes

2条答案

按热度按时间

ipakzgxi1#

在知道axios请求的响应后，使用state来创建路由怎么样？
大概是这样的：

import React, { useState, useEffect } from "react";
import { Route, Switch, PrivateRoute } from "react-router-dom";
import axios from "axios";

import Home from "./Home";
import Error404 from "./Error404";

const Routes = () => {
  const [user, setUser] = useState("");

  useEffect(() => {
    axios.get("/login").then(res => {
      setUser(res);
    });
  }, []);

  return user ? (
    <Switch>
      <PrivateRoute exact path="/" component={Home} user={user} />
      <Route component={Error404} />
    </Switch>
  ) : null;
};

export default Routes;

您可以根据您的响应和其他组件对其进行改进。

赞(0）回复(0）举报 2023-10-18

yhqotfr82#

我想你看起来是这样的：

import {
  createBrowserRouter,
  RouterProvider,
  useLoaderData,
} from "react-router-dom";

function loader() {
  return fetchFakeAlbums();
}

export function Albums() {
  const albums = useLoaderData();
  // ...
}

const router = createBrowserRouter([
  {
    path: "/",
    loader: loader,
    element: <Albums />,
  },
]);

ReactDOM.createRoot(el).render(
  <RouterProvider router={router} />
);

react-router-dom提供了useLoaderData，可用于路由加载前的数据预取！
参考：https://reactrouter.com/en/main/hooks/use-loader-data

赞(0）回复(0）举报 2023-10-18

我来回答

axios 如何在渲染路由之前调用API并接收其信息？

2条答案

相关问题

热门标签

最新问答