react-router v4中Redirect不生效，遇Route组件与render混用警告

嘿，我帮你拆解下这个问题，其实那个警告和Redirect失效是直接相关的，咱们一步步来解决：

首先处理那个Route警告 #

你看到的Warning: You should not use and in the same route; will be ignored，这是React Router v4的明确规则：同一个<Route>组件不能同时使用component和render属性，一旦同时存在，render会被直接忽略——这就是你Redirect逻辑没生效的核心原因！

看你的代码片段，你解构了const { Component: component, ...rest } = this.props，然后把{...rest}传给了<Route>。如果rest里面包含了component属性（比如父组件传过来的），那你的Route就同时有了component（来自rest）和render（你自己写的），直接触发警告，而且你的重定向逻辑根本没机会执行。

修复Redirect失效问题 #

先解决Route属性冲突的问题，再修正Redirect的逻辑：

修正后的代码示例 #

render() {
  // 解构出Component，把其他属性放到rest里，确保rest不含component
  const { Component, ...rest } = this.props;
  return (
    <Route
      {...rest}
      render={props =>
        // 逻辑调整：当isAuth为true时重定向，否则渲染目标组件
        this.isAuth ? (
          <Redirect to="/login" /> // 替换成你实际需要跳转的路径
        ) : (
          <Component {...props} />
        )
      }
    />
  );
}

关键要点说明 #

1. 避免Route属性冲突：确保传给<Route>的rest对象里没有component属性，这样Route就只会使用你定义的render属性，警告自然消失。
2. 修正逻辑判断：你原来的代码只处理了isAuth === false的情况，当isAuth为true时没有返回任何元素，所以Redirect根本没被渲染。要补全分支，明确返回<Redirect>组件。
3. 确认Router上下文：确保你的这个组件被包裹在<BrowserRouter>（或<HashRouter>）里面，<Redirect>必须在Router的上下文环境中才能生效。

这样调整后，警告会消失，当this.isAuth为true时，也能正确触发重定向了。

内容的提问来源于stack exchange，提问作者Jamie Aden