Question

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

1-主页，代码从“星际大战API”（https://swapi.co/）请求字符数据；

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

如果我在主页上刷新页面，就可以了。数据将再次被请求。但是，如果我在字符页面中，它会崩溃，因为字符页面不请求任何数据。它可以处理主页中已收集的数据。

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

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

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

谢谢。

Answer 1

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

您是在“字符页面”组件上使用connect()中的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>中的react-router-dom设置路线时，它会自动传递下来，前提是您是这样设置路线的：

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

如果您改用render={}，则可以通过执行以下操作获得history对象：

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

我希望这会有所帮助！

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

1 个答案: