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

Question

I have a ReactJS application with two pages:

1 - Home Page, where the code requests characters data from Star Wars API ( https://swapi.co/ );

2 - Characters Page, where the characters data is showned, based on the data extracted from the API in the home page.

If I refresh the page when I'm in home page, that's ok. The data will be requested again. But if I'm in the characters page, it crashes because the characters page doesn't request any data. It works with data already collected in home page.

How can I redirect the user to home page if he or she reloads it in the characters page?

I'm using react-router-dom and the home page url is set as "/" and the characters page is "/characters".

I'm also using Redux to store the data.

Thanks.

Answer 1

EDIT: I added the source code for a React/Redux application example that uses axios and redux-thunk to get data from the API.

---

Are you using connect() from react-redux on your Characters Page component?

If not, you can do the following:

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)

This should solve the issue of your Characters Page crashing on reload because it doesn't have the data.

And if you really need to redirect users to the / page, you can utilize the history object. It automatically gets passed down when you set up your routes using <Route> from react-router-dom , given that you set up your route as such:

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

If you use render={} instead, you can get the history object by doing:

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

---

I hope this helps!