我开发了一个具有多个路标的应用程序。
我的索引路由文件：
import Login from "views/Authentification/LoginPage.jsx";
import Dashboard from "layouts/Dashboard/Dashboard.jsx";
const indexRoutes = [
{
path: "/login",
component: Login
},
{
path: "/dashboard",
component: Dashboard
},
{
redirect: true,
path: "/",
to: "/login"
}
];
export default indexRoutes;
我的仪表板路由文件：
const dashboardRoutes = [
{
private: true,
path: "/private/dashboard",
sidebarName: "menu.sidebarName.dashboard",
navbarName: "header.navbarName.dashboard",
icon: Dashboard,
component: DashboardPage
},
{
private: true,
path: "/private/user",
sidebarName: "menu.sidebarName.profil",
navbarName: "header.navbarName.profil",
icon: Person,
component: UserProfile
},
......
{
redirect: true,
path: "/dashboard",
to: "/private/dashboard",
navbarName: "Redirect"
}
];
export default dashboardRoutes;
启动应用程序后，我会很好地重定向到http://localhost:3000/login
但是单击按钮进行连接后，出现错误：
react-dom.development.js:57 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at invariant (react-dom.development.js:57)
at scheduleWork (react-dom.development.js:18486)
at Object.enqueueSetState (react-dom.development.js:12143)
at Router.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
at Router.js:102
at listener (createTransitionManager.js:43)
at createTransitionManager.js:61
at Array.forEach (<anonymous>)
at Object.notifyListeners (createTransitionManager.js:60)
at setState (createBrowserHistory.js:84)
at createBrowserHistory.js:198
at Object.confirmTransitionTo (createTransitionManager.js:33)
at Object.replace (createBrowserHistory.js:181)
at Redirect.perform (Redirect.js:115)
at Redirect.componentDidMount (Redirect.js:75)
at commitLifeCycles (react-dom.development.js:15986)
at commitAllLifeCycles (react-dom.development.js:17388)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at commitRoot (react-dom.development.js:17549)
at completeRoot (react-dom.development.js:19002)
at performWorkOnRoot (react-dom.development.js:18924)
at performWork (react-dom.development.js:18826)
at performSyncWork (react-dom.development.js:18799)
at requestWork (react-dom.development.js:18676)
at scheduleWork (react-dom.development.js:18480)
at Object.enqueueSetState (react-dom.development.js:12143)
at LoginPage.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
at LoginPage.jsx:76
invariant @ react-dom.development.js:57
scheduleWork @ react-dom.development.js:18486
enqueueSetState @ react-dom.development.js:12143
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
(anonymous) @ Router.js:102
listener @ createTransitionManager.js:43
(anonymous) @ createTransitionManager.js:61
notifyListeners @ createTransitionManager.js:60
setState @ createBrowserHistory.js:84
(anonymous) @ createBrowserHistory.js:198
confirmTransitionTo @ createTransitionManager.js:33
replace @ createBrowserHistory.js:181
perform @ Redirect.js:115
componentDidMount @ Redirect.js:75
commitLifeCycles @ react-dom.development.js:15986
commitAllLifeCycles @ react-dom.development.js:17388
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:17549
completeRoot @ react-dom.development.js:19002
performWorkOnRoot @ react-dom.development.js:18924
performWork @ react-dom.development.js:18826
performSyncWork @ react-dom.development.js:18799
requestWork @ react-dom.development.js:18676
scheduleWork @ react-dom.development.js:18480
enqueueSetState @ react-dom.development.js:12143
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
(anonymous) @ LoginPage.jsx:76
Promise.then (async)
handleSubmit @ LoginPage.jsx:68
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:622
executeDispatchesInOrder @ react-dom.development.js:647
executeDispatchesAndRelease @ react-dom.development.js:747
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:760
forEachAccumulated @ react-dom.development.js:727
runEventsInBatch @ react-dom.development.js:903
runExtractedEventsInBatch @ react-dom.development.js:913
handleTopLevel @ react-dom.development.js:5078
batchedUpdates$1 @ react-dom.development.js:19041
batchedUpdates @ react-dom.development.js:2307
dispatchEvent @ react-dom.development.js:5158
interactiveUpdates$1 @ react-dom.development.js:19103
interactiveUpdates @ react-dom.development.js:2328
dispatchInteractiveEvent @ react-dom.development.js:5134
index.js:1452 The above error occurred in the <Redirect> component:
in Redirect (at LoginPage.jsx:108)
in LoginPage (created by WithStyles(LoginPage))
in WithStyles(LoginPage) (created by NamespacesConsumerComponent)
in NamespacesConsumerComponent (created by WithMergedOptions)
in WithMergedOptions (created by Context.Consumer)
in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace)
in LoadNamespace (created by WithMergedOptions)
in WithMergedOptions (created by Context.Consumer)
in LoadNamespace(WithStyles(LoginPage)) (created by Route)
in Route (at src/index.js:46)
in Switch (at src/index.js:42)
in Router (at src/index.js:41)
in I18nextProvider (at src/index.js:40)
Consider adding an error boundary to your tree to customize error handling behavior.
我想重定向到http://localhost:3000/private/dashboard
render() {
let isAuthenticated = JSON.parse(localStorage.getItem(IS_AUTHENTICATED));
if(isAuthenticated === null)
isAuthenticated = this.state.isAuthenticated;
if(isAuthenticated === true){
return <Redirect to={"/dashboard"}/>;
}else{
return LoginTemplate.call(this);
}
}