React 应用程序，为应用程序获取路由的 API 调用答案

【问题标题】：React app, API call that fetches routes for appReact 应用程序，为应用程序获取路由的 API 调用
【发布时间】：2020-10-19 09:42:59
【问题描述】：

您好，我正在使用 react 和 redux，我有我的动作创建器来获取页面的路由，并以这种方式使用它们创建路由：

首先在 app.js 中调用 UseEffect 中的动作创建者（使用 mapDispatchToProps）并将结果（mapStateToProps）传递给 Routes 组件：

    useEffect(() => {
    fetchMenu();
}, []);

<Routes menu={menu} />

然后在 Routes.js 中：

            {menu.map((item) => (
            <PrivateRoute
                key={item.id}
                exact
                path={item.link}
                parentClass="theme-1"
                component={(props) => selectPage(item.linkText, props)}
            />
        ))}

问题是如果我刷新页面，api调用和页面渲染之间会有一点延迟，所以一秒钟浏览器显示“NOT FOUND PAGE”然后立即重定向到路由。我怎样才能让它正常工作？谢谢！

【问题讨论】：

菜单不可用时显示加载页面。
听起来不错，我该怎么做？

标签： reactjs redux react-redux

【解决方案1】：

基本上，您想要的是能够知道数据尚未加载，并据此进行不同的渲染。一个简单的检查是查看menu 是否为空。像这样的：

export const Menu = ({ menu, fetchMenu }) => {
  useEffect(() => {
    fetchMenu();
  }, []);

  if ( menu.length > 0 ) {
    return <Routes menu={menu} />
  } else {
    return <MenuLoading />
  }
}

更高级的设置将能够区分由于 API 错误而导致的空菜单和由于仍在加载而导致的空菜单，但要做到这一点，您需要存储有关 API 调用状态的信息在该州。

【讨论】：