Question

我有一些LoginForm页面，未经授权的用户需要使用什么。在我的App.js中，我做了类似重定向用户的操作

App.js

function App(props) {
  return (
    <div>
      <LoginPageContainer />
      <BrowserRouter>
        <Route path='/home' render={() => <MainPage />} />
      </BrowserRouter>
    </div>
  );
}

我为LoginPage做了ContainerComponent，因为我需要从服务器（isAuth）获取授权状态

let PreLogin = withAuthRedirect(MainPage);

let mapStateToProps = (state) => ({
    isAuth: state.authPage.isAuth
})

let LoginPage = connect(mapStateToProps, { getAuthStatusThunk })(PreLogin);
export default LoginPage;

和Hoc功能，用于检查状态和重定向页面

export const withAuthRedirect = (Component) => {
    class RedirectComponent extends React.Component {
        render() {
            this.props.getAuthStatusThunk();
            return (!this.props.isAuth ? <Redirect to="/login" /> : <Redirect push to="/home" />)
        }
    }
    return RedirectComponent;
}

getAuthStatusThunk-用于获取状态信息的ajax请求的函数

每次将我重定向到url localhost：/ home时，无论我在url中使用什么。我该如何解决这个问题？我不需要重定向其他页面，仅需要默认的localhost /

删除页面重定向，React.js

0 个答案: