How to Link a Custom React Component <MyButton> to Another Page ?
Last Updated :
26 Feb, 2024
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:
Prerequisite:
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
const Profile = () => {
return (
<div className= "profile" >
<h1>This is the Profile page</h1>
</div>
)
}
export default Profile;
|
Javascript
const About = () => {
return (
<div className= "about" >
<h1>This is the About page</h1>
</div>
)
}
export default About;
|
Javascript
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&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:
Share your thoughts in the comments
Please Login to comment...