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

在代码中，如果令牌有效，则将用户重定向到“ /”，以执行浏览器刷新。这将触发整个Web应用程序重新加载，因此将调用App组件componentDidMount，令牌将再次有效，并且页面将再次刷新为“ /”。

应该使用历史记录对象，而不是使用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>
    )
  }
}

Answer 3

您可以使用React-router代替window.location.href来执行重定向。对于任何事件，如果要防止重新加载，也需要使用event.preventDefault（）

页面不断自动刷新

3 个答案: