如何避免重定向两次(react-router-redux)?
How to avoid redirecting twice (react-router-redux)?
我正在使用与 react-router 4.x.
兼容的 the next (5.0.0) version react-router-redux
我的应用程序有两个页面 /login
和 /home
。
如果用户访问不存在的页面,我会尝试将页面重定向到 /login
。这是我的代码
import { Route, Redirect } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route path="/login" render={() => (
isSignedIn ? <Redirect to="/home" /> : <Login />
)}/>
<Route path="/home" component={Home} />
<Redirect to="/login" />
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
如果我删除 <Redirect to="/login" />
并且如果用户已经登录,当他打开页面 /home
时,应用程序将直接转到主页,这很好。
但是,对于 <Redirect to="/login" />
,当用户打开页面 /home
时,应用程序将首先重定向到 /login
,然后返回到 /home
。
如何避免重定向两次?谢谢
利用 Switch
以便呈现第一个匹配的路线,而不是其他任何东西
import {Switch} from 'react-router';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/login" render={() => (
isSignedIn ? <Redirect to="/home" /> : <Login />
)}/>
<Route path="/home" component={Home} />
<Redirect to="/login" />
</Switch>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
你的情况是,即使 /home
匹配,Redirect
也会被执行。
我正在使用与 react-router 4.x.
兼容的 the next (5.0.0) version react-router-redux我的应用程序有两个页面 /login
和 /home
。
如果用户访问不存在的页面,我会尝试将页面重定向到 /login
。这是我的代码
import { Route, Redirect } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route path="/login" render={() => (
isSignedIn ? <Redirect to="/home" /> : <Login />
)}/>
<Route path="/home" component={Home} />
<Redirect to="/login" />
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
如果我删除 <Redirect to="/login" />
并且如果用户已经登录,当他打开页面 /home
时,应用程序将直接转到主页,这很好。
但是,对于 <Redirect to="/login" />
,当用户打开页面 /home
时,应用程序将首先重定向到 /login
,然后返回到 /home
。
如何避免重定向两次?谢谢
利用 Switch
以便呈现第一个匹配的路线,而不是其他任何东西
import {Switch} from 'react-router';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/login" render={() => (
isSignedIn ? <Redirect to="/home" /> : <Login />
)}/>
<Route path="/home" component={Home} />
<Redirect to="/login" />
</Switch>
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
你的情况是,即使 /home
匹配,Redirect
也会被执行。