如何使用 Typescript 在 React 中重定向？

当假设用户登录到网站并且他或她在成功登录后成功登录时使用重定向，我们必须将用户重定向到我们网站上的某个位置。重定向可以以多种方式使用，这完全取决于如何使用它的术语。

在 React 中，一个名为react-router-dom的非常著名的包用于路由网站，在该包中，有一个钩子或者我们可以说名为useNavigate的函数用于重定向

先决条件：

• 在你的机器上安装 Nodejs。
• 安装 typescript，打开你的 Powershell 或 cmd 运行并使用以下命令。

npm install -g typescript

创建 React 应用程序和模块安装：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app my-app --template typescript

第 2 步：对于导航或重定向，我们必须使用以下命令安装一个新包，即react-router-dom ：

npm install @types/react-router-dom
npm install react-router-dom

第 3 步：在您创建 React 应用程序的目录中打开您的 IDE 或代码编辑器。现在转到src文件夹，创建一个名为components的文件夹。在 components 文件夹中创建三个文件，分别是Main.tsx 、 First.tsx和Second.tsx文件。

项目结构：应该是这样的。

实现：在相应的文件中写下以下代码。

App.tsx

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route }
    from "react-router-dom";
import First from "./components/First";
import Second from "./components/Second";
import Main from "./components/Main";
  
function App() {
  return (
    
      
        }/>
        }/>
        }/>
      
    
  );
}
  
export default App;

主要.tsx

import { useNavigate } from 'react-router-dom';
  
function Main() {
  const navigate = useNavigate();
  
  const goToSecondsComp = () => {
  
    // This will navigate to second component
    navigate('/second'); 
  };
  const gotToFirstComp = () => {
  
    // This will navigate to first component
    navigate('/first'); 
  };
  
  return (
    

      

        
Main components
        go to 2nd 
        go to 1st 
      
    
  );
}
  
export default Main;

第一个.tsx

import React from 'react';
import { Link } from 'react-router-dom';
  
function First() {
  return (
    

      

        
First components
  
        go back
      
    
  );
}
  
export default First;

第二个.tsx

import React from 'react';
import { Link } from 'react-router-dom';
  
function Second() {
  return (
    

      

        
First components
  
        go back
      
    
  );
}
  
export default Second;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：