我有一个带有ReactTS的Web应用程序。我使用react-router库进行导航，我需要通过编程方式将用户导航到Registration按钮点击的注册页面。
我在react-router中找到了几种编程方法：
1.带useNavigate挂钩-只能在组件内部使用。
1.带有redirect功能-仅适用于装载机。
我使用带钩子的函数组件，但不想在组件中保留太多逻辑，我想把逻辑移到服务层，现在我正在寻找不带钩子的程序导航方法。
这是我的准则

import { redirect, useNavigate } from 'react-router-dom';
import { AUTHORIZATION_REGISTRATION_MAILBOX } from '../../../constants/routes';

export const LogInComponent = () => {
  const navigate = useNavigate();

  const goToRegistration = () => {
    redirect(AUTHORIZATION_REGISTRATION_MAILBOX); // it's not working
    navigate(AUTHORIZATION_REGISTRATION_MAILBOX); // it's working but only inside component
  }

  return (
    <div>
      <button className='enter-button' onClick={goToRegistration}>
        Registration
      </button>
    </div>
  );
};

统一方案主任1

我在寻找这样的解决方案：
1.组件使用服务

import { registrateUser } from './registrationService'

export const RegistrationComponent = () => {
  
  const registrate = () => {
    registrateUser();
  }

  return (
    <div>
      <button onClick={registrate}>
        Registrate
      </button>
    </div>
  );
}

1.服务生成一些逻辑并通过导航服务重定向用户

import { redirectTo } from './navigationService'

export const registrateUser = () => {
  
  // makes some logic

  redirectTo(/*some path*/);
}

1.导航服务应重定向用户

export const registrateUser = (path: string) => {
  window.location.href = path; // as example
}

使用window.location.href的解决方案是有效的，但是它清除了状态值（上下文值和存储值），所以这不是一个好的决定。