我在应用程序中遇到路由问题,最后找到了问题根源。 这是我的路由器定义
const PublicRoutes = ({history, isLoggedIn}) => {
console.log("RENDERING ROUTES");
return (
<Switch>
<Route exact path={'/404'} component={asyncComponent({resolve: () => import('app/modules/404/404')})}/>
<Route exact path={'/500'} component={asyncComponent({resolve: () => import('app/modules/500/500')})}/>
<Route exact path={'/login'} component={asyncComponent({resolve: () => import('app/modules/login/page/LoginPage.tsx')})}/>
<RestrictedRoute path="/dashboard" component={asyncComponent({resolve: () => import('app/modules/dashboard/page/Dashboard')})} isLoggedIn={isLoggedIn}/>
<Redirect
exact
from="/"
to="/login"
/>
</Switch>
);
};
const mapStateToProps = ({authentication}: IRootState) => ({
isLoggedIn: authentication.isAuthenticated
});
export default connect(mapStateToProps, null, null, {pure: false})(PublicRoutes);
当我访问根域URL localhost:3333/
时,我被重定向到login
路由,但是出现空白页,并且控制台出现错误。
RENDERING ROUTES
VM56:37 Warning: You tried to redirect to the same route you're currently on: "/login"
window.console.error @ VM56:37
routes.tsx:9 RENDERING ROUTES
VM56:37 Warning: You tried to redirect to the same route you're currently on: "/login"
window.console.error @ VM56:37
routes.tsx:9 RENDERING ROUTES
VM56:37 Warning: You tried to redirect to the same route you're currently on: "/login"
我得到五个这样的错误。
我正在按以下方式使用PublicRoutes
render() {
const {notifications} = this.props;
return (
<div className="app-container">
<LoadingBar showFastActions={false} updateTime={50} style={{backgroundColor: '#009cd8', height: '4px', zIndex: 999999}}/>
<Notifications notifications={notifications} style={notificationsStyle}/>
<ToastContainer
position={toast.POSITION.TOP_LEFT as ToastPosition}
className="toastify-container"
toastClassName="toastify-toast"
/>
<DashAppHolder>
<PublicRoutes history={history}/>
</DashAppHolder>
</div>
);
}
我的代码有什么问题,为什么要多次渲染路线?
谢谢