我在vs 2017中创建了一个使用Asp.Net Core和typescript / webpack / react的网站。
基本上,我的网站有3个页面:主页索引页面,登录页面和仪表板。主页是渲染应用程序的主页。
如果用户登录,则将呈现“仪表板”组件,否则,将在“主页索引”视图中呈现登录组件。
下面是我的主要应用,其中列出了路线:
export class App extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
public render() {
return (
<div >
<Route exact path="/" component={Login} />
<Route exact path="/login" component={Login} />
<Layout>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Layout>
</div>
);
}
}
和PrivateRoute相似:
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
localStorage.getItem('user') ?
<Component {...props} /> :
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}} />
)}/>
)
这就像未登录一样工作,然后返回到登录组件(在Home Index内部)URL。但是问题是,如果我只是从浏览器(localhost:1234 / login)刷新该页面,则它会尝试在MVC路由中找到此/login
,因此出现如下错误:
如果我从PrivateRoute删除重定向,则它可以正常工作。因此,我认为问题在于MVC路由发生重定向。