成功登录后,我想重定向到新页面。路线(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,所以我必须添加:
browserHistory
createHistory
history
// browser_history_signleton.js import createHistory from 'history/createBrowserHistory'; export const browserHistory = createHistory();
向history实例提供实例的最有效方法是什么?
我发现感觉不错的两个选项,并且我都使用了。我很好奇,看是否有人有问题。
选项1:将history物体传递到sagas。
它并不明显,但是sagaMiddleware.run函数采用了第二个参数,该参数已转发给sagas。即:
sagaMiddleware.run
/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的扩展。专门用于处理“历史”对象的传奇-使用动作进行推送/替换。即:
/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存储和操作保持干净,而不受社区提出的 一些 怪异的建议-例如在操作中传递历史对象。
让我知道你的想法。