What is React Router
React Router (RR) is a library that is used to create routes in your React application. Oh, no, it doesn't come pre-installed in your react project - you have to install it using npm install react-router-dom
You most likely have come across web apps that routes you to a new page depending on what action you specify and you wonder, "how do I do this in my application."
In this post you are gonna be learning how RR works and how you can use them in your project for routing.
React Router is powerful and efficient because it has features that allow you to load your code lazily, dynamic route matching, location transition building, route nesting, index routing etc.
Let's jump right in and learn how to use this powerful library.
Prerequisite
Node: you should have Node installed installed on your computer.
Have a working knowledge of React
Shall we begin?
Let's begin by creating a React app using the create-react-app
CLI
npx create-react-app learn-react-router
Ensure that our React app is installed successfully.
Now let's install react-router
Do npm install react-router-dom
Yep, congratulations. You just passed the first step to working with React Router.
Now let's create a routes folder inside our src folder so that we can have our components in there.
create Users.js
file and include just a simple text like this.
// => Users.js
import React from 'react'
export default function Users() {
return (
<div>
<h1>Welcome to Users route </h1>
</div>
)
}
Let's also create a Post.js
file inside the same routes folder
// => Posts.js
import React from 'react'
export default function Posts() {
return (
<div>
<h1>Welcome to Posts route</h1>
</div>
)
}
Holdup! I hope your app is running, if no, get it running by doing npm start
It's time to make our routes navigable using React Router.
Go to the index.js
file
// => index.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Users from './routes/Users';
import Posts from './routes/Posts';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} >
<Route path="users" element={<Users/>} />
<Route path ="posts" element={<Posts />} />
<Route path="*" element={<h1>Route does not
exist</h1>}/>
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
If you navigate to localhost:3000/users
you will be taken to the users page where you will find the text Welcome to Users route as we've specified the text inside Users.js
. Of course you can also navigate to the posts route localhost:3000/posts
.
Whoa! Whoa! Whoa! Did I just hear you say "what the fuck is BrowserRouter, Routes and Route
?
I'm so sorry about that, I had absolutely no intention to annoy you - I was about to explain them.
BrowserRouter
. Give me a moment, please. I need to say this:
"this is a blog post aimed at helping you understand a particular subject matter and not a documentation."
Suffice to say, I might most likely not use the vocabularies found in the documentation.
Back to the what I was about to say before the emmm...the mosquitoes interrupted...
BrowserRouter
kind of announce that "yo! this person is about to create a route"
But then you can't exactly own a house in BrowserRouter (think of it has a city) without the Mayor giving you a go ahead - Routes
is the Mayor. You have to put each of your Route
inside it.
Route
requires two parameters that you must specify:
element
: this is it trying to tell you "yo! where should I drive to when I hit the road." Road here would be path
. This place to drive to is usually a component.
path
: this is the road that leads to your destination (a component)!
Got that? Yeahhh!
path="*"
what's that?
Oh, I almost forgot that. This is called upon only when the route the user request does not exist. In this case we asked it to say "Route does not exist"
Wanna see for yourself? Okay do localhost:3000/home
. What did it tell ya?
Now you get it!
Hollup instructor! How can I link to a particular route when a user clicks something?
Smart student! You simply link it (winks). Let's do that.
// => App.js
import React from 'react';
import {Link} from 'react-router-dom'
export default function App() {
return (
<div>
<h1>Welcome to the HOMEPAGE</h1>
<Link to="/users">
<p>go to users page</p>
</Link>
</div>
)
}
Notice that I imported something called Link
from react-router-dom
and I specified, using to=""
, where the link should go when <p>...</p>
is clicked.
Test it out yourself. Yeahhhhhhhhhh! its working - I can feel your excitement from over here.
I want to keep this as basic as possible, I don't want to overload you. I want you to feel the taste of each bite.
one last thing, I promise!
Nested Routes
The official documentation has this to say of Nested routes:
" This is one of the most powerful features of React Router making it so you don't have to mess around with complicated layout code. The vast majority of your layouts are coupled to segments of the URL and React Router embraces this fully.
Routes can be nested inside one another, and their paths will nest too (child inheriting the parent). "
This is what I have to say: imagine you want to do something like this localhost:3000/users/name
. Nested route helps you achieve that.
Let's go to our index.js file to do this... but before that ensure you create a Name.js
file inside the routes folder. You should write a JSX inside - something like "this is the name route and it will appear inside the users (parent) route" or just anything
// => index.js
...
<Route path="users" element={<Users />} >
<Route path="name" element={Name />} />
</Route>
...
You simply nest the child route inside it's parent route.
To make this functional you have to import and add Outlet
into the parent route.
// => Users.js
import React from 'react'
import {Outlet} from 'react-router-dom'
export default function Users() {
return (
<div>
<h1>Welcome to Users route </h1>
</div>
<Outlet />
)
}
Test it out! Navigate to the name route using localhost3000/users/name
Hurrayyyyyy!
Top comments (2)
Bro tis' a good article.. I wonder why it has 0 comments .. Anyways thanks for such a good post
I am glad you find it helpful.