如何重定向到 ReactJS 中的另一个页面？

在本文中，我们将学习如何使用react-router-dom包重定向到 ReactJS 中的另一个页面。 ReactJS 是一个免费的开源前端库，用于构建单页应用程序。

react-router-dom： react-router-dom 是一个 reactJS 包，它使您能够在网页中实现动态路由。

方法：

• 创建基本的反应应用程序。
• 制作不同的页面进行路由。
• 安装 react-router-dom 包。
• 使用 react-router-dom 包实现路由。

第 1 步：在终端中使用以下命令创建一个基本的 React 应用程序。

npx create-react-app 

项目结构：创建基本的 react 应用程序后，文件夹结构如下所示，

react-app的文件夹结构

第 2 步：为路由制作不同的页面。在这里，我们将为我们的 react-app 创建不同的组件。这样我们就可以绕过它们进行演示。

Components: Home Page, About Page, ContactUs Page. 

创建组件后，Folder 结构如下所示，

制作组件后的文件夹结构

Home.jsx

import React from "react";
  
const Home = () => {
  return (
    

      
Home Page
    
  );
};
  
export default Home;

关于.jsx

import React from "react";
  
const About = () => {
  return (
    

      
About Page
    
  );
};
  
export default About;

联系我们.jsx

import React from "react";
  
const ContactUs = () => {
  return (
    

      
Contact Us Page
    
  );
};
  
export default ContactUs;

第三步：安装 react-router-dom 包。

在这里，我们将使用以下命令在我们的 react-app 中安装 react-router-dom 包。

npm i react-router-dom

安装 react-router-dom

安装 react-router-dom 包后 package.json 文件看起来像这样，

包.json

第 3 步：使用 react-router-dom 包实现路由。在这里，我们将在我们的 react-app 中实现 react-router-dom 包。为了实现这一点，我们必须从 react-router-dom 包中导入一些组件，即 BrowserRouter、Switch、Route 和 Redirect。

import { BrowserRouter as Router, Switch, 
    Route, Redirect,} from "react-router-dom";

注意：我们将 BrowserRouter 的别名设置为 Router，只是为了让事情变得简单。

让我们 一一查看所有导入的组件：

• BrowserRouter：它使用 HTML5 历史 API 来保持 UI 与 URL 同步。
• Route ：它的职责是在其路径与当前 URL 匹配时呈现 UI。
• Switch ：它呈现与该位置匹配的第一个子 Route 或 Redirect。
• 重定向：无论历史堆栈中的当前位置如何，它都会呈现新位置。

这是App.js文件的代码，我们将在其中实现 react-router-dom 包。

应用程序.js

import "./App.css";
// importing components from react-router-dom package
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
  
// import Home component
import Home from "./components/Home";
// import About component
import About from "./components/About";
// import ContactUs component
import ContactUs from "./components/ContactUs";
  
function App() {
  return (
    <>
      {/* This is the alias of BrowserRouter i.e. Router */}
      
        
          {/* This route is for home component 
          with exact path "/", in component props 
          we passes the imported component*/}
          
            
          {/* This route is for about component 
          with exact path "/about", in component 
          props we passes the imported component*/}
          
            
          {/* This route is for contactus component
          with exact path "/contactus", in 
          component props we passes the imported component*/}
          
            
          {/* If any route mismatches the upper 
          route endpoints then, redirect triggers 
          and redirects app to home component with to="/" */}
          
        
      
    
  );
}
  
export default App;

第4步：在App.js文件中实现路由后，我们必须在用户侧给出路由端点。因此，我们将在 Home.jsx 文件中提供路由端点。

这是更新后的Home.jsx文件。

主页.jsx

import React from "react";
// importing Link from react-router-dom to navigate to 
// different end points.
import { Link } from "react-router-dom";
  
const Home = () => {
  return (
    

      
Home Page
      

      

        

          {/* Endpoint to route to Home component */}
          Home
        
        

          {/* Endpoint to route to About component */}
          About
        
        

          {/* Endpoint to route to Contact Us component */}
          Contact Us
        
      
    
  );
};
  
export default Home;

运行应用程序的步骤：打开终端并运行以下命令。

npm start

输出：

反应应用程序输出