Как вызвать API и получить его информацию перед рендерингом маршрутов? - PullRequest
Новая
       40

Как вызвать API и получить его информацию перед рендерингом маршрутов?

0 голосов
/ 03 ноября 2019

У меня есть приложение React с определенными некоторыми публичными / частными маршрутами, и мне нужно передать информацию о пользователе в частный маршрут. Я пытаюсь вызвать API (который возвращает информацию о пользователе) и получить его до визуализации маршрутов, но не могу заставить его работать - маршруты обрабатываются до получения ответа, поэтому пользователь получает пустое значение. Я пытался использовать async / 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>
    )
}

1 Ответ

1 голос
/ 03 ноября 2019

А как насчет использования состояния для создания маршрутов после того, как вы знаете ответ на ваш запрос axios?
Примерно так: 

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;

Вы можете улучшить его, в зависимости от ваших ответов и других компонентов.

...