React Router | загружать компонент только при обновлении страницы

Question

Я использую React Router v4 Browser Router . Мой сценарий: у меня страница входа в систему при каждом обновлении страницы (щелчок по обновлению браузера или F5)

Маршрут

 <Router history={history}>
        <div>
          <Spin spinning={this.props.isloading}>
            <Switch>
              <Route path="/login" component={Login} />
              <Route path="/Dashboard" component={Dashboard} />
              <Route path='*' component={NotFound} />
            </Switch>
          </Spin>
        </div>
      </Router>

Мне нужно загрузить компонент входа в систему при обновлении страницы, поэтому мне нужно что-то вроде ниже

<Refresh path="/login" component={Login} />

Answer 1

Просто сделайте что-то вроде:

const Refresh = ({reload, children}) => reload ? children : null;

...

<Refresh reload={performance.navigation.type === 1}>
    <Redirect to="/login"/>
</Refresh>

На основании:

• Убедитесь, что страница перезагружается или обновляется в Javascript
• https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Answer 2

Создайте метод componentDidMount в своем корневом компоненте, который будет отвечать за вход в систему вашего пользователя путем перенаправления пользователя на /login.

Затем добавьте прослушиватель событий для обновления страницы, который выведет пользователя из системы для любого обновления страницы.

componentDidMount(){
    if(!userLoggedIn()){
        //redirect to login
        history.push("/login")
    }

    window.addEventListener('beforeunload', logoutTheUser);
    /* if you are not maintaining a session, you dont need this
      as user will be logged out automatically on page refresh.*/
}