React组件内重定向报错咨询：错误原因及正确实现方式

嘿，这个问题我之前也碰到过，主要是React Router版本差异搞的鬼！你的代码报错的核心原因是版本不兼容，或者说你用错了当前版本对应的重定向方式。

问题出在哪？ #

你参考的文档大概率是针对React Router v5及更早版本的，但如果你现在用的是主流的v6版本，<Redirect>组件已经被完全移除了——而且v6的设计逻辑里，组件内的条件重定向不再使用这个组件，所以才会弹出“只能用于路由配置，不能直接渲染”的错误提示。

另外，如果是在v5版本下还报错，那可能是你的组件没有被包裹在<Router>（比如<BrowserRouter>）的上下文范围内，导致Redirect无法获取路由上下文。

正确的实现方式 #

根据你使用的React Router版本，分两种情况处理：

1. 如果你用的是React Router v6（当前主流） #

v6里用<Navigate>组件替代了<Redirect>，还可以通过replace属性模拟原来Redirect的“替换当前历史记录”行为（默认是push，会新增一条历史）。修改你的代码如下：

import { Navigate } from 'react-router-dom';

// 你的类组件代码
render() {
  if(this.state.verified){
    return(<div>Verified</div>)
  } else {
    // replace属性可选，根据需求决定是否替换历史记录
    return(<Navigate to="/" replace />)
  }
}

如果是函数组件，更推荐用useNavigate钩子实现编程式重定向，灵活性更高：

import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';

function YourComponent() {
  const navigate = useNavigate();
  const [verified, setVerified] = useState(false);

  useEffect(() => {
    // 当verified为false时触发重定向
    if(!verified) {
      navigate('/', { replace: true });
    }
  }, [verified, navigate]);

  if(verified) {
    return <div>Verified</div>;
  }

  // 重定向过程中可以返回null或者加载提示
  return null;
}

2. 如果你用的是React Router v5及更早版本 #

在v5里，你的原代码其实是正确的，但要确保组件被包裹在Router上下文里。比如你的根组件应该这样写：

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <YourComponent />
  </Router>,
  document.getElementById('root')
);

另外，v5也支持编程式重定向，用withRouter高阶组件获取history对象：

import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  componentDidUpdate() {
    if(!this.state.verified) {
      // replace替换历史记录，push则新增
      this.props.history.replace('/');
    }
  }

  render() {
    if(this.state.verified){
      return(<div>Verified</div>)
    }
    // 重定向时返回null即可
    return null;
  }
}

// 别忘了用withRouter包裹组件
export default withRouter(YourComponent);

总结 #

现在React Router的主流版本是v6，优先推荐用<Navigate>或useNavigate来实现条件重定向。你的原代码就是因为版本不匹配，误用了v6里已经被废弃的<Redirect>组件才报错的。

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