刷新浏览器时如何将应用程序重定向到主页？

Posted 2023-02-22

【中文标题】刷新浏览器时如何将应用程序重定向到主页？

【英文标题】：How to redirect the application to home page when refreshing the browser?

【发布时间】：2019-11-10 21:52:24

【问题描述】：

我有一个包含两个页面的 ReactJS 应用程序：

1 - 主页，代码从 Star Wars API (https://swapi.co/) 请求字符数据；

2 - 字符页面，显示字符数据，基于从主页中的 API 提取的数据。

如果我在主页时刷新页面，那没关系。将再次请求数据。但是如果我在字符页面中，它会崩溃，因为字符页面不请求任何数据。它适用于主页中已收集的数据。

如果用户在字符页面重新加载，我如何将用户重定向到主页？

我用的是react-router-dom，主页url设置为“/”，字符页面为“/characters”。

我也在使用 Redux 来存储数据。

谢谢。

【问题讨论】：

history.push('/home');使用它在您需要的条件下重定向

在您的 app.js 或第一个开始渲染的组件中，您可以根据您的应用所需的检查和条件执行 history.push('/home')。

【参考方案1】：

编辑：我为使用axios 和redux-thunk 从 API 获取数据的 React/Redux 应用程序示例添加了 source code。

---

您是否在角色页面组件上使用来自react-redux 的connect()？

如果没有，您可以执行以下操作：

import  connect  from 'react-redux'

const CharactersPage = props => 
    // You can retrieve your data from props.characterData

    return ...


const mapStateToProps = state => 
    return  characterData: state.characterData 


export default connect(mapStateToProps)(CharactersPage)

这应该可以解决您的角色页面在重新加载时崩溃的问题，因为它没有数据。

如果您确实需要将用户重定向到/ 页面，您可以使用history 对象。当您使用来自react-router-dom 的<Route> 设置路线时，它会自动传递下去，因为您设置了这样的路线：

<Route path='/characters' component=CharactersPage />

如果您改用render=，您可以通过以下方式获取history 对象：

<Route path='/characters' render=routeProps => <CharactersPage ...routeProps /> />

---

我希望这会有所帮助！

【讨论】：

Connect 在页面刷新时无济于事。他必须将数据存储在本地存储或其他东西中，并在页面刷新时将其插入初始状态。他遇到的问题是，由于刷新，没有数据可以连接。

我在字符页面中使用了连接，现在它不再崩溃。谢谢！经过一些分析后，我得出结论，从用户的角度来看，返回主页并不是一个好的做法。因此，我创建了一个验证，以在商店为空的情况下再次从字符页面填充商店，这意味着页面可能已重新加载。如果 store 不为空，我创建的函数将返回 false 并且不需要新的请求。你们太棒了。再次感谢。