How to Link a Custom React Component to Another Page ?

Last Updated : 17 Jul, 2024

React is a powerful JavaScript library for building user interfaces, and one of its key features is the ability to create reusable components. In this article, we will walk you through the process of linking a custom React component, <MyButton>, to another page using react-router-dom.

Prerequisite:

Table of Content

Method 1: Using the anchor tag( )
Method 2: Using useNavigate() hook from react-router-dom
Method 3: Using the Link Tag from react-router-dom

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: Switch to the project folder using the following command.

cd react-custom-link

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

npm i react-router-dom

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

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.25.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

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

JavaScript

//App.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 (
        <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

//Home.js 

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

export default Home;

JavaScript

//About.js 

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

export default About;

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="/https://www.geeksforgeeks.org/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

//components/MyButton.js

const MyButton = ({ to }) => {

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

export default MyButton;

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

//components/MyButton.js

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;

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

//components/MyButton.js

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;