重定向不适用于 react-router v4

Question

我收到这个警告

Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored

不确定是否会导致重定向失败，但我下面的代码无法正常工作，如果 this.isAuth 为真就没问题，但 <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;

它给你警告的原因是因为你试图从道具中用大写 C 解构 Component 而你将 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"
              }}
            />
          )
        }
      />
    );
  }

Working sandbox

重定向不适用于 react-router v4

Redirect won't work with react-router v4

javascript

reactjs

react-router

react-router-v4