时间戳

首页 > 解决方案 > 如何修复反应路线的重定向？

reactjs - 如何修复反应路线的重定向？

问题描述

我有一个关于 React 重定向的问题。这是我的 App.js 文件中的路线：

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about" component={About} />
          <Route path="/login">
            <Login onLoginSuccess={setUserSession} />
          </Route>
          <Route path="/register">
            <Register />
          </Route>
          <LoggedInRoute userData={getUserData()} path="/feed">
            <Feed />
          </LoggedInRoute>
        </Switch>

这是 LoggedInRoute 组件：

import React from 'react';

import { Redirect, Route } from "react-router-dom";

function LoggedInRoute(props) {
  return (
    <Route
      render={({ location }) =>
        props.userData.id ? (
          props.children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

export default LoggedInRoute;

这是登录获取：

  const onFinish = values => {
    fetch('/api/login',
      {
        method: 'POST',
        body: JSON.stringify(values)
      }
    ).then(response => response.json())
    .then(data => {
      if (data.success === 1) {
        if (location.state.from) {
          history.push(location.state.from.pathname);
        }
      }
    });
  };

我的问题是成功登录后重定向不起作用。如果我在未登录时尝试访问“/feed”，首先我会被重定向到“/login”，但在成功登录后，我不会被重定向回初始路由（/feed）。我不确定我错过了什么。提前谢谢你们，伙计们:)

标签： reactjsreact-routerreact-router-dom

解决方案

如果我是你，我会采用这种方法：

import { Redirect, Route, useLocation } from "react-router-dom";

function LoggedInRoute({ userData, children }) {
  const location = useLocation();
  const [redirect, setRedirect] = useEffect(false);

  useEffect(() => {
    if (!userData || !userData.id) {
      setRedirect(true);
    }
  }, [userData]);

  if (redirect) {
    return (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: location }
        }}
      />
    );
  }

  return <Route component={<>{children}</>} />;
}

这样你就不会得到任何stale数据

推荐阅读