提交表单后无法进行“导航”

时间:2020-05-16 11:00:53

标签: reactjs reach-router

我正在使用Reach Router,我的目标是在人们注册后转发他们。问题是 我的组件从未达到navigate("/events/myevent");。一旦调用函数login(isAuthenticated生效,我的应用程序将用户转发到/ admin。

routes.js

const Routes = () => {
  const { isAuthenticated, isLoading } = React.useContext(UserContext);

  return isLoading ? (
    // Checking if user is authenticated or not
    <LoadingScreen />
  ) : (
    <TimezoneProvider>
      {isAuthenticated ? (
        // Primary router if authenticated
        <Router>
          <Redirect from="account/*" to="/admin" noThrow />
          <AdminSection path="admin/*" />
          <OrganizerSection path="organizers/*" />
          <EventSection path="events/*" />
          <NotFound default />
        </Router>
      ) : (
        // Primary router if not authenticated
        <Router>
          <Redirect from="admin/*" to="/account/login" noThrow />
          <AccountSection path="account/*" />
          <OrganizerSection path="organizers/*" />
          <EventSection path="events/*" />
          <NotFound default />
        </Router>
      )}
    </TimezoneProvider>
  );
};

AccountSection-index.js

<Router primary={false}>
  <AccountLogin default />
  <AccountRegister path="register" />
  <AccountPasswordReset path="password-reset" />
  <AccountPasswordResetConfirm path="password-reset/:uid/:token" />
</Router>

AccountRegister.js

const AccountRegister = ({ navigate, location }) => {
  const { login } = React.useContext(UserContext);
  const [userTimezone, setUserTimezone] = useState(moment.tz.guess());

  const { data: response } = useSWR("timezones/", api, {
    onSuccess: (response) => {
      const timezoneCodes = response.data.reduce(
        (acc, curr) => [...acc, curr["code"]],
        []
      );
      if (!timezoneCodes.includes(userTimezone)) {
        setUserTimezone("UTC");
      }
    },
  });
  const timezones = maybe(() => response.data, []);

  const handleRegister = async (values, { setErrors }) => {
    await api
      .post("users/", values)
      .then(async ({ data }) => {
        const accessToken = data.access;

        if (qs.hasOwnProperty("going")) {
          const eventSlug = qs.going;
          try {
            await axios.post(`${API_URI}events/${eventSlug}/attend/`, null, {
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${accessToken}`,
              },
            });
          } catch {
            // TODO
          }
        }

        login(accessToken, data.user);
        navigate("/events/myevent");
      })
      .catch((error) => {
        const errorCode = parseInt(error.response.status);
        const errors = [400, 401].includes(errorCode)
          ? error.response.data
          : {};

        setErrors(parseErrors(errors));
      });
  };

  return (
    <AccountRegisterPage
      onNavigate={navigate}
      isLoading={response === undefined}
      userTimezone={userTimezone}
      timezones={timezones}
      onRegister={handleRegister}
    />
  );
};

export default AccountRegister;

0 个答案:

没有答案
相关问题