Introduction
Giving users the ability to navigate throughout your application in a logical and organized manner is crucial. React provides developers with the <Route></Route>
tool to allow ease of access to the components of your choosing. In this post, I will walk you through the steps to take in order to set up client-side routing using React in the form of clickable links, assuming you have started a React application using create-react-app
.
Step 1:
Before you are able to use <Route>
you must first import from react as such:
import {BrowserRouter} from "react-router-dom";
This should be done in your index.js file.
If you wish to rename the BrowserRouter
to something else, you can do so by importing in the following manner:
import {BrowserRouter as MyRouter} from "react-router-dom";
For the sake of this guide, I will be using <BrowserRouter>
.
Step 2:
In your terminal, run the command $ npm install react-router-dom
Step 3:
In your index.js file, wrap the application being rendered with <BrowserRouter>
eg:
...
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
document.getElementById('root')
);
...
Step 4:
Decide where you want to draw the routes. Usually, it makes sense to direct the routes to where the components are being rendered. I'll say that parent component is called <App />
.
Step 5:
Import <Route>
and <Switch>
into the <App />
component using
import {Route, Switch} from "react-router-dom";
Step 6:
Create an empty navigation component, such as Nav.js
eg:
import React from "react";
function Nav(){
return(<div></div>);
}
export default Nav;
Step 7:
Render the navigation component within the <App />
component.
Step 8:
Wrap all the components within <App />
you wish to create routes to with <Switch></Switch>
, and wrap each individual component within the <Switch>
with <Route></Route>
eg:
...
function App(){
return(){
<Nav />
<Switch>
<Route>
<ComponentOne />
</Route>
<Route>
<ComponentTwo />
</Route>
</Switch>
};
}
...
Note: the <Nav />
component was left outside of the <Switch>
, this is because we want the navigation functionality to remain on all pages of our application.
Step 9:
Set the paths you want for each component within the <Switch>
using path
or exact path
eg:
...
<Route exact path="/One">
<ComponentOne />
</Route>
<Route exact path="/Two">
<ComponentTwo />
</Route>
...
Step 10:
Import <NavLink>
into your <Nav />
component. Then, add <NavLink>
to create clickable links with paths defined by the <Route>
s in step 9.
eg:
...
import {NavLink} from "react-router-dom";
function Nav(){
return(
<div>
<h2>Navigation Bar</h2>
<NavLink to="/One">ComponentOne</NavLink>
<NavLink to="/Two">ComponentTwo</NavLink>
</div>
)
}
...
Conclusion:
You should now have fully functioning client-side routing in the form of clickable links under a navigation bar! Being able to implement routes is a crucial skill to have considering how necessary it is for users to be able to navigate around applications with ease. I hope this guide is helpful to you if you are learning how to build client-side routing in React.
Top comments (0)