Как перенаправить приложение на домашнюю страницу при обновлении браузера?

Question

У меня есть приложение ReactJS с двумя страницами:

1 - домашняя страница, где код запрашивает данные символов из API Star Wars (https://swapi.co/);

2 - Страница символов, на которой отображаются данные символов на основе данных, извлеченных из API на домашней странице.

Если я обновлю страницу, когда буду на домашней странице, это нормально. Данные будут запрошены снова. Но если я нахожусь на странице символов, она падает, потому что страница символов не запрашивает никаких данных. Работает с данными, уже собранными на домашней странице.

Как я могу перенаправить пользователя на домашнюю страницу, если он или она перезагрузит его на странице символов?

Я использую response-router-dom, а URL-адрес домашней страницы установлен как "/", а страница символов - "/characters".

Я также использую Redux для хранения данных.

Спасибо.

Answer 1

РЕДАКТИРОВАТЬ: Я добавил исходный код для примера приложения React / Redux, который использует axios и redux-thunk для получения данных из API.

---

Используете ли вы 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} />} />

---

Надеюсь, это поможет!