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

Question

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

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

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

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

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

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

我还使用 Redux 来存储数据。

谢谢。

Answer 1

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

---

你在使用 connect()来自 react-redux在你的 Angular 色页面组件上？

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

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)

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

如果您真的需要将用户重定向到 /页面，您可以使用 history目的。当您使用 <Route> 设置路线时，它会自动传递下去来自 react-router-dom ，假设您这样设置路线:

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

如果您使用 render={}相反，您可以获得 history通过做对象:

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

---

希望对您有所帮助!