Routing with Reach router
We have installed the reach router and imported it into our project, so let's start setting up a simple web application to understand the reach router.
In this example we will create two component namely home and dashboard and use the reach router to navigate between the components
We will go through the process step by step so firstly we will create both the components:
Home
const Home = () => {
return (
<div>
<h1>This is the home route</h1>
</div>
);
};
Dashboard
const Dashboard = () => {
return (
<div>
<h1>Dashboard</h1>
</div>
);
};
Now that we have our components ready, we can start routing. To “switch” between the two components, we need links to point to each component and a Router component of which these two components will be children. We will start with the link. For routing, we need to use a Link component which will be imported from Reach Router. Each Link component will have a to attribute, which is the component's path (we will define this path soon). Let’s add our links.
import {Link } from '@reach/router';
function App() {
return (
<>
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
<Link to="/">Home</Link>
<Link to="dashboard">Dashboard</Link>
</div>
</>
);
}
As you can see, the path to the home component is “/” which means the home component will be rendered when the user is on the root path.
Now that we have the links, let us import the Router component and use it.
import { Router,Link } from '@reach/router';
function App() {
return (
<>
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
<Link to="/">Home</Link>
<Link to="dashboard">Dashboard</Link>
</div>
<Router>
<Home path="/" />
<Dashboard path="dashboard" />
</Router>
</>
);
}
We have written all the code in a single file index.js once you have merged all the components the index.js should be like this
import React from "react";
import ReactDOM from "react-dom";
import { Router,Link } from '@reach/router';
const Home = () => {
return (
<div>
<h1>This is the home route</h1>
</div>
);
};
const Dashboard = () => {
return (
<div>
<h1>Dashboard</h1>
</div>
);
};
function App() {
return (
<>
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
<Link to="/">Home</Link>
<Link to="dashboard">Dashboard</Link>
</div>
<Router>
<Home path="/" />
<Dashboard path="dashboard" />
</Router>
</>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
The home page that we will get from the above code would look like this
Once you click on the dashboard link the website take you to the dashboard
This was a small basic demo to create a webapp with reach router we have created some basic components and liked them with reach router.
Frequently asked questions
-
What is Reach Router used for?
Reach router are used to define multiple routers in a React-based web application. When a user types a specific URL into their browser, and that URL path matches one of the 'routes' and the user is routed to that Route.
-
What are other libraries like Reach router.
React router is a similar package to Reach router which is used for routing.
Key Takeaways
In this article we discussed about reach router with a basic implementation of a web app. We created a web app with basic components and used reach router for routine the links.
You may check out Full Stack Web Development Course — Node.js + HTML/CSS/JS on Coding Ninjas
If you are preparing for the next interview, check out the blogs 15 Most Frequently Asked React JS Interview Questions and 10 Best ReactJS Interview Questions. And if you are a beginner, check out the Top 5 skills to learn before you start with ReactJs to know the prerequisites to learn React.
If you are preparing for your DSA interviews then , Coding Ninjas Studio is a one-stop destination. This platform will help you acquire effective coding techniques and give you an overview of student interview experience in various product-based companies.
Happy learning!
305+ registered