如何避免 React Router 私有路由中的无限循环？

Question

在我的 App.js 中，我有一些通过 <PrivateRoute> 保护的经过身份验证的页面，如下所示：

<PrivateRoute path="/dashboard">
  <Dashboard />
</PrivateRoute>

我像这样实现<PrivateRoute>：

function PrivateRoute({ children, ...rest }) {
  return (
    <Route {...rest} render={() => <CheckRedirect children={children} />} />
  );
}

问题是，<CheckRedirect> 函数调用了我服务器上的一个端点，该端点动态地告诉你重定向到哪里。

函数如下：

export const CheckRedirect = ({ children }) => {
  const [isChecking, setIsChecking] = React.useState(true);
  const [target, setTarget] = React.useState(null);

  const url = "https://example.com/get-redirect"

  useEffect(() =>{
    async function getPage() {
      axios.get(url)
      .then(function (response) {
        setTarget(response.data.message)
      }).finally(() => setIsChecking(false))
    }
    
    getPage();  
  }, []);

  if (isChecking) {
    return "... Checking";
  }

  return {target} ? (
    <Redirect to={target} />
  ) : (
    <Redirect to='/404' />
  );
};

如果您没有登录，它会在message 字段中发回“/login”。如果您已登录，它将发送“/dashboard”。

如果它发回“/dashboard”，那么 React Router会产生一个无限循环！ 它会再次尝试相同的<PrivateRoute>，它会再次调用端点，它会再次返回“ /dashboard”等等……

如果这已经是重定向的结果，我有没有办法告诉我的<PrivateRoute>不执行<CheckRedirect> 函数？

Answer 1

我自己还没有测试过，但是您是否尝试过将path 作为道具传递给CheckRedirect，并且只在getPage 中提取setTarget，如果它返回不同的路线？

function PrivateRoute({ children, path, ...rest }) {
  return (
    <Route {...rest} render={() => <CheckRedirect children={children} path={path} />} />
  );
}

export const CheckRedirect = ({ children, path }) => {
  const [isChecking, setIsChecking] = React.useState(true);
  const [target, setTarget] = React.useState(null);

  const url = "https://example.com/get-redirect"

  useEffect(() =>{
    async function getPage() {
      axios.get(url)
      .then(function (response) {
        const newPath = response.data.message
        if (path !== newPath) {
          setTarget(newPath)
        }
      }).finally(() => setIsChecking(false))
    }
    
    getPage();  
  }, []);

  if (isChecking) {
    return "... Checking";
  }

  return {target} ? (
    <Redirect to={target} />
  ) : (
    <Redirect to='/404' />
  );
};

为避免CheckRedirect 在一切正常的情况下进行任何重定向（即，这是对该路由的有效请求），请确保CheckRedirect 在这种情况下实际上返回null。如果您可以控制服务器响应，我会为不存在的路由（即重定向到 404）返回一个不同的值（不是null，而是-1），并在何时保留null你真的只想返回null。

Answer 2

在CheckRedirect 组件中，您甚至不使用 children 道具。它呈现一个字符串，然后重定向到一个页面。它永远循环是正常的。将 path 作为 props 传递给 CheckRedirect 组件，如果它与服务器响应相同，则渲染子组件。

添加路径属性并传递它：

  export const CheckRedirect = ({ children, path }) => {

在重定向之前添加条件：

  if (target === path) {
    return children
  }

Answer 3

只需将您的 PrivateRoute Logic 更改为类似的内容

            const PrivateRoute = ({ component: Component, ...rest }) => {
               
               return (
                  <Route
                     {...rest}

                     render = { props =>

                        user.isOnline ? ( <Component {...props} /> ) :
                        ( 
                           <Redirect
                              to={{
                                 pathname: "/login",
                                 state: { from: props.location }
                              }}
                           />
                        )
                     }
                  />
               )
            }

然后

            <PrivateRoute exact path="/dashboard" component={Dashboard} />