成功登录后,我想重定向到新页面。
路线(V4)的用法如下:
import { browserHistory } from '....browser_history_signleton';
...
class App extends Component {
render() {
const { authentication: { isSignedIn } } = this.props;
return (
<ConnectedRouter history={browserHistory}>
<div>
<Header/>
<Route exact path="/" component={Home}/>
<PrivateRoute isAuthorized={isSignedIn} path="/page1" component={PageOne}/>
<PrivateRoute isAuthorized={isSignedIn} path="/page2" component={PageTwo}/>
</div>
</ConnectedRouter>
);
}
}
传奇看起来像:
import { browserHistory } from '....browser_history_signleton';
export function* loginSaga() {
while (true) { // eslint-disable-line no-constant-condition
try {
const payload = yield take(LOGIN_SUBMIT);
const raceResult = yield race({
signin: call(loginRequest, payload),
logout: take('LOGOUT')
});
if (raceResult.signin) {
const { data } = raceResult.signin;
yield put(loginRequestSucceeded(data));
const redirectUrl = `.....based on location.state.from.pathname`
browserHistory.push(rediretUrl);
...
我的主要问题是如何共享
browserHistory
。createHistory
模块中的history
不是signleton,因此我必须添加:// browser_history_signleton.js
import createHistory from 'history/createBrowserHistory';
export const browserHistory = createHistory();
向传奇提供
history
实例的最有效方法是什么? 最佳答案
我发现感觉不错的两个选项,并且我都使用了。我很好奇,看看是否有人遇到任何问题。
选项1:将history
对象传递给sagas。
它并不明显,但是sagaMiddleware.run
函数采用了第二个参数,该参数已转发给sagas。 IE:
/wherever/you/start/saga.js
import { createBrowserHistory } from "history";
import saga1 from "./saga1.js";
const function* rootSaga({ history }) {
yield all([saga1({ history })])
}
const sagaTask = sagaMiddleware.run(rootSaga, { history: createBrowserHistory() });
我在这里学到的:https://github.com/ReactTraining/react-router/issues/3972#issuecomment-251189856
这是一种访问历史记录功能的干净方法。在实际的Sagas中,您将像平常一样使用历史对象。
./saga1.js
export default ({ history }) => [
takeEvery(actions.DO_SOMETHING_THEN_NAVIGATE, function*({ payload }) {
...do something
history.push("/somewhere");
}),
];
选项2:让一个传奇来管理
history
对象并使用操作进行导航这是对选项1的扩展。专门用于处理“历史”对象的传奇-使用 Action 进行插入/替换。 IE:
/my/history/saga.js
export default ({ history }) => [ // history is passed in ala option 1.
takeEvery(actions.HISTORY_PUSH, function*({ payload }) {
const pathname = payload.fooParam;
yield history.push(pathname);
}),
takeEvery(actions.HISTORY_REPLACE, function*({ payload }) {
yield history.replace({ pathname: payload.barParam });
}),
];
这样可以使您的redux存储和操作保持整洁,免受社区提出的怪异技巧的困扰-例如在操作中传递历史对象。
让我知道你的想法。