react-router-dom中点击组件按钮后如何实现页面重定向

你当前使用的是react-router-dom v6版本，以下是两种常用的重定向实现方式：

方式1：声明式重定向（兼容类组件，无需修改组件类型） #

该方式通过状态控制<Navigate>组件渲染实现跳转，同时兼容登录校验成功后跳转的场景：

1. 首先从react-router-dom导入依赖：

import { Navigate, Link } from 'react-router-dom'

2. 在Login类组件中初始化状态，替换原有DOM操作和事件绑定逻辑：

class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      shouldRedirect: false, // 控制重定向的状态
      username: '',
      password: ''
    }
  }

  handleLogin = () => {
    const { username, password } = this.state
    if(username.trim() !== '' && password.trim() !== ''){
      // 无需校验直接跳转的情况，直接修改重定向状态即可
      this.setState({ shouldRedirect: true })

      // 如果需要等fetch校验成功后跳转，把上面的setState放到请求回调里即可：
      // sendToLogin({login:username.value,pwd:pwd.value}).then(res => {
      //   if(res.success) this.setState({ shouldRedirect: true })
      // })
    }
  }

  render(){
    // 重定向判断放在渲染最开头
    if(this.state.shouldRedirect) {
      // replace配置会替换当前历史记录，避免用户点后退回到登录页
      return <Navigate to="/" replace />
    }

    return <div className="main" id="main">
      <div className="registration-cssave">
        <div className="form" >
          <h3 className="text-center">Вход в систему</h3>
          <div className="form-group">
            <input 
              className="form-control item" 
              type="text" 
              name="login" 
              maxLength="15" 
              minLength="4"
              pattern="^[a-zA-Z0-9_.-]*$" 
              placeholder="Логин" 
              required 
              value={this.state.username}
              onChange={(e) => this.setState({username: e.target.value})}
            />
          </div>
          <div className="form-group">
            <input 
              className="form-control item" 
              type="password" 
              name="password" 
              minLength="6" 
              placeholder="Пароль" 
              required
              value={this.state.password}
              onChange={(e) => this.setState({password: e.target.value})}
            />
          </div>
          <div className="form-group">
            <button 
              className="btn btn-primary btn-block create-account" 
              type="button"
              onClick={this.handleLogin}
            >
              Войти
            </button>
          </div>
          <div className="toRegister">
            {/* 替换原生a标签为Link避免页面刷新 */}
            <Link to="/Register" >Регистрация</Link>
          </div>
        </div>
      </div>
    </div>
  }
}
export default Login

方式2：命令式重定向（函数组件更简洁） #

如果可以把Login组件改为函数组件，直接使用useNavigate hook实现跳转：

1. 导入依赖：

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

2. 重写Login组件：

const Login = () => {
  const navigate = useNavigate()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = () => {
    if(username.trim() && password.trim()) {
      // 直接跳转
      navigate('/', { replace: true })
      // fetch校验成功后跳转写法
      // sendToLogin({login: username, pwd: password}).then(res => {
      //   if(res.success) navigate('/', { replace: true })
      // })
    }
  }

  // 和方式1中render方法里的JSX内容完全一致，省略重复代码
  return (/* 原有渲染内容 */)
}
export default Login

注意事项 #

• React中不推荐手动调用addEventListener、document.getElementById操作DOM，使用框架自带的事件绑定和受控组件写法可以避免数据和视图不同步的问题
• 登录成功类的跳转建议开启replace配置，优化用户体验

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