Question

我收到了这个警告

警告：您不应在同一路线中使用<Route component>和<Route render>; <Route render>将被忽略

不确定是否会导致重定向失败，但下面的代码只是不起作用，如果this.isAuth为true，则不行，<Redirect /> < / p>

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，而不是{ {1}} 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"
              }}
            />
          )
        }
      />
    );
  }

<强> Working sandbox

重定向无法使用react-router v4

1 个答案: