重定向不適用於react-router v4

Question

我得到這個警告

警告：您不應在同一路徑中使用<Route component>和<Route render> 。 <Route render>將被忽略

不確定是否會導致重定向失敗，但是下面的代碼將無法正常工作，如果this.isAuth為true，則可以，但不能使用<Redirect />

https://codesandbox.io/s/5xm202p1j4

render() {
    const { Component: component, ...rest } = this.props;

    return (
      <Route
        {...rest}
        render={props =>
          this.isAuth === false ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: "/login"
              }}
            />
          )
        }
      />
    );
  }

Answer 1

您錯誤地破壞了道具的結構，應該為const { component: Component, ...rest } = this.props;

這是給你的警告的原因是因為你試圖解構Component與大寫C而你通過從道具component作為道具的authRoute，而不是因為Component是目前存在於props的rest params包含傳遞組件道具下到Route 。

render() {
    const { component: Component, ...rest } = this.props;

    return (
      <Route
        {...rest}
        render={props =>
          this.isAuth === false ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: "/login"
              }}
            />
          )
        }
      />
    );
  }

工作沙箱