ReactJS如何在app.js中使用withRouter

Question

我需要使用withRouter，所以我可以使用历史记录，以便在JWT到期时重定向用户并自动记录

我尝试导入withRouter，就像我在其他组件中使用它一样用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 />的子组件，因为App不是（它是<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

如果您正在使用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);
  });

Answer 3

您可以在index.js中使用Router并为所有路由安装App

// 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);