How to Link a Custom React Component <MyButton> to Another Page ?

Adding the functionality of shifting from one page to another using a custom React component can seem daunting at first, but as we go deeper in understanding it.

We will discuss the following methods to link a custom React Component.

React components are reusable pieces of code similar to JavaScript Functions. They act independently and are of two types:

• Class-based components
• Function-based components

Prerequisite:

• Introduction to React
• Functional Components in React
• React Hooks

Steps to Create React Application And Installing Module:

Step 1: You will start a new project using create-react-app so open your terminal and type.

npx create-react-app react-custom-link

Step 2: In order to use react-router-dom, we have to install it using the following command:

npm i react-router-dom

Step 3: Switch to the tic-tac-toe-react folder using the following command.

cd react-custom-link

Step 4: Change to the src folder and remove the unnecessary stuff using the following command

cd src
rm*

Step 5: Create a pages folder in src, which contains the About.js, Home.js, and Profile.js files.

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

Step 6: Create a components folder in src, which contains the MyButton.js files.

mkdir components
touch MyButton.js

Step 7: In the src folder, create App.js, and index.js files.

touch App.js index.js

Project Structure:

Example: Setup all the files with basic code to link a custom React component to another page.

Javascript

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 (
        <div className="app">
            <Router>
                <MyButton to="" />
                <MyButton to="profile" />
                <MyButton to="about" />
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/profile"
                        element={<Profile />} />
                    <Route path="/about"
                        element={<About />} />
                </Routes>
            </Router>
        </div>
    )
}

export default App;

Javascript

//Profile.js
const Profile = () => {
    return (
        <div className="profile">
            <h1>This is the Profile page</h1>
        </div>
    )
}

export default Profile;

Javascript

//About.js
const About = () => {
    return (
        <div className="about">
            <h1>This is the About page</h1>
        </div>
    )
}

export default About;

Javascript

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

export default Home;

Now that the basic setup of the project is done, we can dive deep into the various methods which can be used to link a React component to another page. 

We’ll be building three custom buttons that will take us to three respective pages, namely Home, Profile, and About.

Method 1: Using the anchor tag(<a> </a>)

Syntax:

<a href="/nameofpage"> Other elements </a>

Example: The simplest way to redirect a user to another page without the use of any external libraries is to embed the react code in an anchor tag, and pass the redirect URL as a prop to the custom react component.

Javascript

const MyButton = ({ to }) => {

    return (
        <a href={`/${to}`}>
            <button className="my-button">
                Take me to {to === '' ? "home" : to}
            </button>
        </a>
    )
}

export default MyButton;

Step: Run the application using the following command from the root folder:

npm start

Output:

Method 2: Using useNavigate() hook from react-router-dom

The useHistory() is a hook designed to give access to the history instance of the browser, which was later updated in v6 of the react-router-dom to useNavigate() to resolve the bugs caused by useHistory().

Syntax:

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

Example: We can pass the redirect URL to the custom react component as a prop and use an onClick Listener to redirect the user to the requested URL.

Javascript

import { useNavigate } from "react-router-dom";

const MyButton = ({ to }) => {

    const navigate = useNavigate();

    return (
        <button className="my-button" onClick={() =>
            { navigate(`/${to}`) }}>
            Take me to {to === '' ? "home" : to}
        </button>
    )
}

export default MyButton;

Step: Run the application using the following command from the root folder:

npm start

Output:

Method 3: Using the Link Tag from react-router-dom

Syntax:

<Link to="nameofpage"> Other elements </Link>

Example: This method is very much similar to the first one where we used an anchor tag. Similarly, a Link tag is used where the requested URL is passed to the custom component as a prop.

javascript&amp;nbsp;

import { Link } from "react-router-dom";

const MyButton = ({ to }) => {

    return (
        <Link to={`/${to}`}>
            <button className="my-button">
                Take me to {to === '' ? "home" : to}
            </button>
        </Link>
    )
}

export default MyButton;

Step: Run the application using the following command from the root folder:

npm start

Output: