页面不断自动刷新
Page is continuously getting refreshed automatically
我有一个 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;
从 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")
在您的代码中,如果令牌有效,您会将用户重定向到“/”以执行浏览器刷新。这将触发整个 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>
)
}
}
我有一个 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;
从 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")
在您的代码中,如果令牌有效,您会将用户重定向到“/”以执行浏览器刷新。这将触发整个 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>
)
}
}