时间戳

首页 > 解决方案 > 刷新浏览器时如何将应用程序重定向到主页？

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

问题描述

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

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

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

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

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

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

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

谢谢。

标签： javascriptreactjsreduxreact-reduxreact-router-dom

解决方案

编辑：我添加了一个 React/Redux 应用程序示例的源代码，该示例使用axios并redux-thunk从 API 获取数据。

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

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

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对象。<Route>当您使用from设置路线时，它会自动传递下去react-router-dom，因为您设置了路线：

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

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

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

我希望这有帮助！

推荐阅读