在复古传奇中登录成功后，路由器怎么跳转？

Question

谢谢你检查这个问题。我是一个新来的反应，我使用反应钩子和redux-saga。我使用反应钩子和redux-saga.我想让路由器跳转到...。/home 当登录成功后。我使用了 connected-react-router 和 history 要做到这一点，这是一个常见的方法吗？请告诉我是否有更好的方法，现在当我登录成功后，页面不会跳转到'主页'，这是我的代码。

reducer.ts

const initialUser = (): UserState => {
  const token = TokenStorage.getToken();
  if (token === null) {
    return { isAuthenticated: false };
  }
  return UserModel.getUser(token);
};

function user(state = initialUser(), action: UserAction): UserState {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, ...action.payload };
    case LOGIN_FAILED:
      TokenStorage.clear();
      return { isAuthenticated: false };
    default:
      return state;
  }
}

export const createRootReducer = (history: History) =>
  combineReducers({
    router: connectRouter(history),
    user,
  });

// when add router into combineReducers. the RootState is wrong.. how to fix?
export type RootState = ReturnType<typeof createRootReducer>;

商店索引.ts

export default function configureStore(history: History) {
  const sagaMiddleware = createSagaMiddleware();
  const composeEnhancers =
    (typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
    compose;

  const store = createStore(
    createRootReducer(history),
    composeEnhancers(applyMiddleware(sagaMiddleware, routerMiddleware(history)))
  );

  sagaMiddleware.run(rootSaga);
  return store;
}

saga.ts

function* LoginRequestSaga(username: string, password: string) {
  try {
    const result: ILoginResponseData = yield call(
      fetchLogin,
      username,
      password
    );
    if (result.code === '1') {
      TokenStorage.storeToken(result.token);
      message.success(result.msg);
      const user = UserModel.getUser(result.token);
      yield put(loginSuccess(user));
      yield put(push('/home'));    <----- this line doesn't run....
    } else {
      message.error(result.msg);
      yield put(loginFailed());
    }
  } catch (err) {
    message.error(err);
    yield put(loginFailed());
  }
}

索引.ts

export const history = createBrowserHistory();
export const store = configureStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Router />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

我的路由器

const renderRoutes = routes.map(({ path, exact, component, key }) => (
  <Route exact={exact || false} path={path} key={key} component={component} />
));

const Routers: React.FC = () => (
  <BrowserRouter>
    <Suspense fallback={<Loading />}>
      <Switch>{renderRoutes}</Switch>
    </Suspense>
  </BrowserRouter>
);

如果你想查看更多的细节，你可以查看这个。回购谢谢大家。

Answer 1

嗯，我有一个非常类似的项目，同样的方法来登录（用redux-saga）。为了实现重定向，我用了这个方法在我的 Login.js 组件。

const history = useHistory()
const { isLogged, state } = useSelector(state => ({
    isLogged: state.logged.isLogged,
    state: state.login,
}))

if(isLogged) {
    history.push(routes.dashboard)
}

基本上，我储存的是 isLogged 变成减速机，并检查它在。Login.js 组件。

希望这能帮助你。

Answer 2

你可以创建一个包含createBrowserHistory()的服务历史，并在整个应用程序中使用它。

history.js。

import {createBrowserHistory} from 'history';

const history = createBrowserHistory ();

export default history;

你想在哪里使用。

import history from '~ / services / history';

history.push ('/ dashboard');