реагировать маршрут и частный маршрут и перенаправить - PullRequest
0 голосов
/ 26 ноября 2018

Я разрабатываю приложение, в котором у меня есть несколько дорожных файлов.

Мой индексный файл маршрута:

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);
   }
   }
...