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

Question

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

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

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

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

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

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

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

谢谢。

Answer 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} />} />

---

我希望这会有所帮助！