ReactJS Как использовать withRouter внутри app.js

Question

Мне нужно использовать withRouter, чтобы я мог использовать историю для перенаправления пользователя, когда JWT истекает, и он автоматически выходит из системы

Я попытался импортировать с помощью роутера, как я использую его в других компонентах, и обернуть export default App с помощью withRouter следующим образом: export default withRouter(App);

Но это ошибка, которую я получаю:

Error: Invariant failed: You should not use Route outside a Router

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom';
import jwt_decode from 'jwt-decode';
import setAuthToken from './utils/setAuthToken';
import { setCurrentUser, logoutUser } from './actions/authActions';

import { Provider } from 'react-redux';
import store from './store';

import Navbar from './components/Navbar';
import UsersManagement from './components/UsersManagement';
import Login from './components/Login';
import AddUser from './components/users/AddUser';

import './App.css';

if (localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    store.dispatch(logoutUser(this.props.history));
    window.location.href = '/login';
  }
}

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="container">
            <Route exact path="/" component={Navbar} />
            <Route exact path="/" component={UsersManagement} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/add-user" component={AddUser} />
          </div>
        </Router>
      </Provider>
    );
  }
}

export default withRouter(App);

как решить эту проблему?

Answer 1

Таким образом, проблема в том, что вы можете только использовать withRouter для компонентов, которые являются потомками <Router />, а поскольку приложение не является (это контейнерный компонент <Router />) выдает ошибку.

Кроме того, эта логика должна быть внутри некоторого компонента, который получает необходимые реквизиты:

if (localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    store.dispatch(logoutUser(this.props.history));
    window.location.href = '/login';
  }
}

Answer 2

Вы можете использовать Router в index.js и монтировать приложение для всех маршрутов

// In index.js
<Provider store={store}>
  <Router>
    <App />
  </Router>
</Provider>

// In App.js

class App extends Component {

  componentDidMount () {
    if (localStorage.jwtToken) {
      setAuthToken(localStorage.jwtToken);
      const decoded = jwt_decode(localStorage.jwtToken);
      store.dispatch(setCurrentUser(decoded));
      const currentTime = Date.now() / 1000;
      if (decoded.exp < currentTime) {
        store.dispatch(logoutUser(this.props.history));
        window.location.href = '/login';
      }
    }
  }
  
  render() {
    return (
        <>
          <Route exact path="/" component={Navbar} />
          <Route exact path="/" component={UsersManagement} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/add-user" component={AddUser} />
        </>
    );
  }
}

export default withRouter(App);

Answer 3

Если вы используете axios для запросов, вы можете использовать перехватчики для проверки ответов, а затем выйти из системы / перенаправить пользователя.

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });