如何链接自定义 React 组件<MyButton>到另一个页面？

如何将自定义 React 组件 链接到另一个页面？

React 组件是类似于 JavaScript 函数的可重用代码片段。他们独立行动，有两种类型：

• 基于类的组件
• 基于功能的组件

对于本教程，我们将使用功能组件。

使用自定义 React 组件添加从一个页面切换到另一个页面的功能起初看起来令人生畏，但随着我们对它的深入理解，它变得更加容易。让我们设置我们的项目并看看实现它的各种方法。

先决条件：

• React 简介
• React 中的函数式组件
• 反应钩子

所需模块：

• npm
• 反应
• 反应路由器dom

创建 React 应用程序并设置：

第 1 步：您将使用create-react-app启动一个新项目，因此打开您的终端并输入。

npx create-react-app react-custom-link

第 2 步：我们将使用 react-router-dom 进行路由。 react-router-dom 是一个路由模块，可以让我们实现动态路由和基于组件的路由。为了使用 react-router-dom，我们必须使用以下命令安装它：

npm i react-router-dom

第 3 步：使用以下命令切换到 tic-tac-toe-react 文件夹。

cd react-custom-link

第 4 步：切换到 src 文件夹并使用以下命令删除不必要的东西

cd src
rm*

第 5 步：在 src 中创建一个pages 文件夹，其中包含 About.js、Home.js 和 Profle.js 文件。

mkdir pages
touch About.js Home.js Profle.js

第 6 步：在 src 中创建一个components 文件夹，其中包含 MyButton.js 文件。

mkdir components
touch MyButton.js

第 7 步：在src 文件夹中，创建 App.js 和 index.js 文件。

touch App.js index.js

项目结构：项目中的文件结构将如下所示。

从根文件夹使用以下命令运行应用程序：

npm start

示例：使用基本代码设置所有文件，以将自定义 React 组件链接到另一个页面。

Home.js

const Home = () => {
    return(
        

            
This is the Home page
        
    )
}
  
export default Home;

关于.js

const About = () => {
    return (
        

            
This is the About page
        
    )
}
  
export default About;

Javascript

const Profile = () => {
    return (
        

            
This is the Profile page
        
    )
}
  
export default Profile;

应用程序.js

import { BrowserRouter as Router, Routes, 
    Route } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import MyButton from "./components/MyButton";
  
const App = () => {
    return (
        

            
                
                
                
                
                    } />
                    } />
                    } />
                
            
        
    )
}
  
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

现在项目的基本设置已经完成，我们可以深入研究可用于将 React 组件链接到另一个页面的各种方法。

我们将构建三个自定义按钮，将我们带到三个各自的页面，即主页、个人资料和关于。

方法一：使用锚标签( )

句法：

 Other elements 

示例：在不使用任何外部库的情况下将用户重定向到另一个页面的最简单方法是将反应代码嵌入锚标记中，并将重定向 URL 作为道具传递给自定义反应组件。

MyButton.js

const MyButton = ({ to }) => {
  
    return (
        
            
                Take me to {to === '' ? "home" : to}
            
        
    )
}
  
export default MyButton;

输出：

方法 2：使用 react-router-dom 中的 useNavigate() 钩子

useHistory() 是一个钩子，用于访问浏览器的历史实例，后来在 react-router-dom 的 v6 中更新为 useNavigate() 以解决由 useHistory() 引起的错误。

句法：

const navigate = useNavigate();
navigate("/nameofpage");

示例：我们可以将重定向 URL 作为 prop 传递给自定义 react 组件，并使用 onClick 侦听器将用户重定向到请求的 URL。

MyButton.js

import { useNavigate } from "react-router-dom";
  
const MyButton = ({ to }) => {
  
    const navigate = useNavigate();
  
    return (
         
            { navigate(`/${to}`) }}>
            Take me to {to === '' ? "home" : to}
        
    )
}
  
export default MyButton;

输出：

方法 3：使用 react-router-dom 中的链接标签

句法：

 Other elements 

示例：此方法与我们使用锚标记的第一个方法非常相似。同样，在将请求的 URL 作为 prop 传递给自定义组件的情况下，使用 Link 标记。

MyButton.js

import { Link } from "react-router-dom";
  
const MyButton = ({ to }) => {
  
    return (
        
            
                Take me to {to === '' ? "home" : to}
            
        
    )
}
  
export default MyButton;

输出：