页面不断自动刷新

Question

我有一个 React 应用程序，在加载应用程序组件时，应用程序首先检查本地存储中是否有令牌，如果存在，则获取令牌并验证它，如果令牌有效，则获取用户到仪表板，如果不是，用户将被带到登录页面，但是发生的事情是页面不断刷新，我使用 window.location.href 将用户重定向到其他页面，我在做什么错了请告诉我我已经发布了下面的代码

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import setAuthToken from "./utils/setAuthToken";
import jwtDecode from "jwt-decode";

import store from "./store/store";

import Dashboard from "./components/app/Dashboard";
import HomePage from "./components/homepage/HomePage";
import Navbar from "./components/common/Navbar";
import { UserDetails } from "./components/common/UserDetails";

import { Provider } from "react-redux";
import { logoutUser } from "./store/actions/authActions";
import { setCurrentUser } from "./store/actions/usersActions";

class App extends Component {
  componentDidMount() {
    if (localStorage.getItem("user")) {
      const token = localStorage.getItem("user");

      console.log("token available");
      const decoded = jwtDecode(token);
      var currentTime = Date.now().toString();
      currentTime = currentTime.substring(0, currentTime.length - 3);
      const currentTimeNum = parseInt(currentTime);
      if (currentTimeNum > decoded.exp) {
        console.log("logged out");
        setAuthToken();
        store.dispatch(logoutUser());
        window.location.href = "/home-page";
      } else {
        console.log("logged in");
        setAuthToken(token);
        window.location.href = "/";
        store.dispatch(setCurrentUser());
      }
    } else {
      console.log("logged out");
      setAuthToken();
      window.location.href = "/home-page";
    }
  }

  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div className="App">
            <Navbar />
            <Switch>
              <Route path="/home-page" component={HomePage} exact />
              <Route path="/" component={Dashboard} exact />
              <Route path="/user/:username" component={UserDetails} exact />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App;

Answer 1

从 App.js 中删除 BrowserRouter 并通过在 index.js ->

中执行此操作将其放在应用程序之上

<BrowserRouter> <App> <BrowserRouter/>

并替换这个

window.location.href = "/foo-bar"

有了这个

 this.props.history.push("/foo-bar")

或

this.props.history.replace("/foo-bar")

Answer 2

在您的代码中，如果令牌有效，您会将用户重定向到“/”以执行浏览器刷新。这将触发整个 webapp 重新加载，因此 App 组件 componentDidMount 被调用，token 将再次有效，页面将再次刷新为“/”。

您应该使用历史对象而不是 location.href：

import { createBrowserHistory } from 'history';
import { Router } from 'react-router';

const history = createBrowserHistory();

class App extends Component {
  componentDidMount() {
    // instead of window.location.href = 'some-url'
    history.push('/some-url');  
  }

  //..

  render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          {/* ... */}
        </Router>
      </Provider>
    )
  }
}

页面不断自动刷新

Page is continuously getting refreshed automatically

javascript

reactjs

redux

window.location