Question

我正在创建具有两组视图的应用程序：

公共视图-登录，注册，重置密码等（不适用于登录用户，如果是，则重定向到第一个受保护的视图）。
受保护的视图-登录后访问（不适用于未登录的用户，如果可以，则重定向到登录页面）。

这是我的代码。不幸的是，它不能按我的意愿工作。登录后，站点的内容已更改，但URL仍为/login。

logged变量来自redux存储，它确定登录的当前状态。

重要的是视图的包装-对于登录的用户，我想在<Content />内包装视图，而对于未登录的<Sign />。它包含我的导航等。

return (
  <Router>
    <>
      <Route exact path="/" render={() => <Redirect to={logged ? appUrls.investmentList : appUrls.login} />} />

      <Route
        render={() => logged ? (
          <Content>
            <Switch>
              <Route path={appUrls.investmentList} component={InvestmentList} />
              <Route path={appUrls.assumptionList} component={AssumptionList} />
            </Switch>
          </Content>
        ) : (
          <Sign>
            <Switch>
              <Route exact path={appUrls.login} component={Login} />
              <Route exact path={appUrls.register} component={Register} />
              <Route exact path={appUrls.resetPassword} component={ResetPassword} />
              <Route path={appUrls.setPassword} component={SetPassword} />
            </Switch>
          </Sign>
        )}
      />
    </>
  </Router>
);

已更新

Login组件

import * as React from "react";
import {connect} from "react-redux";
import {bindActionCreators, Dispatch} from "redux";
import {login} from "../../actions/login";
import LoginForm from "../login_form/LoginForm";
import SignHeader from "../sign_header/SignHeader";
import SignSeparator from "../sign_separator/SignSeparator";
import SocialButtons from "../social_buttons/SocialButtons";

interface IDispatchProps {
    login: typeof login;
}

interface IProps extends IDispatchProps {}

const Login: React.SFC<IProps> = props => {

    return (
        <>
            <SignHeader>Zaloguj się za pomocą</SignHeader>
            <SocialButtons />

            <SignSeparator />

            <SignHeader>lub adresem email</SignHeader>
            <LoginForm onSubmit={(data: any) => props.login(data)} />
        </>
    );
};

const mapDispatchToProps = (dispatch: Dispatch) => ({
    ...bindActionCreators({login}, dispatch),
});

export default connect(null, mapDispatchToProps)(Login);

Answer 1

这可能会解决

export default withRouter(
  connect(null, mapDispatchToProps)(Login)
);

React Router（v4）-分开的公共视图和受保护的视图

1 个答案: