¿Cómo vincular un componente React personalizado <MyButton> a otra página?

Los componentes de React son fragmentos de código reutilizables similares a las funciones de JavaScript. Actúan de forma independiente y son de dos tipos:

• Componentes basados ​​en clases
• Componentes basados ​​en funciones

Para este tutorial, usaremos componentes funcionales. 

Agregar la funcionalidad de cambiar de una página a otra usando un componente React personalizado puede parecer desalentador al principio, pero a medida que profundizamos en su comprensión, se vuelve más fácil. Configuremos nuestro proyecto y echemos un vistazo a varias formas de lograrlo.

Requisito previo:

• Introducción a reaccionar
• Componentes funcionales en React
• Ganchos de reacción

Módulos requeridos:

• npm
• Reaccionar
• reaccionar-enrutador-dom

Creación de la aplicación React y configuración: 

Paso 1: Comenzará un nuevo proyecto usando create-react-app, así que abra su terminal y escriba.

npx create-react-app react-custom-link

Paso 2: Usaremos react-router-dom para fines de enrutamiento. react-router-dom es un módulo de enrutamiento que nos permite implementar enrutamiento dinámico y enrutamiento basado en componentes. Para usar react-router-dom, tenemos que instalarlo usando el siguiente comando:

npm i react-router-dom

Paso 3: cambia a la carpeta tres en raya usando el siguiente comando.

cd react-custom-link

Paso 4: cambie a la carpeta src y elimine las cosas innecesarias con el siguiente comando

cd src
rm*

Paso 5: Cree una carpeta de páginas en src, que contenga los archivos About.js, Home.js y Profile.js.

mkdir pages
touch About.js Home.js Profile.js

Paso 6: Cree una carpeta de componentes en src, que contenga los archivos MyButton.js.

mkdir components
touch MyButton.js

Paso 7: en la carpeta src , cree los archivos App.js e index.js.

touch App.js index.js

Estructura del proyecto: La estructura de archivos en el proyecto se verá así.

Ejecute la aplicación usando el siguiente comando desde la carpeta raíz:

npm start

Ejemplo: Configure todos los archivos con código básico para vincular un componente React personalizado a otra página.

Inicio.js

const Home = () => {
    return(
        <div className="home">
            <h1>This is the Home page</h1>
        </div>
    )
}

export default Home;