Most of the application you develop will have multiple pages and you would require to have a separate URL for each one of them. React cannot handle routing on its own. There are many libraries like react router, reach router, react navigation etc to handle navigation in react. In this post we will see how we can use react router to handle navigation in react apps.
Create a new react app using the following command:
1npx create-react-app react-router-tutorial
Now install the react-router-dom and history package:
1yarn add react-router-dom@next history
Now in index.js
wrap the App
component with the BrowserRouter
component,
which can be imported from the react-router-dom
package that we just installed.
1import React from "react"2import ReactDOM from "react-dom"3import { BrowserRouter } from "react-router-dom"4import App from "./App"5import "./index.css"67ReactDOM.render(8 <React.StrictMode>9 <BrowserRouter>10 <App />11 </BrowserRouter>12 </React.StrictMode>,13 document.getElementById("root")14)
It is necessary to wrap any routes or links created using react router with Router
component (in our case BrowserRouter
).
So we wrap the whole application inside BrowserRouter
.
BrowserRouter
is a variant of Router
which uses the HTML5 history API,
which helps in maintaining the browser history.
Now update App.js
with the following code:
1import React from "react"2import { Routes, Route, Link } from "react-router-dom"34function App() {5 return (6 <div className="App">7 <nav>8 <ul>9 <li>10 <Link to="/">Home</Link>11 </li>12 <li>13 <Link to="dashboard">Dashboard</Link>14 </li>15 <li>16 <Link to="about">About</Link>17 </li>18 </ul>19 </nav>20 <div className="main">21 {/* Define all the routes */}22 <Routes>23 <Route path="/" element={<Home />}></Route>24 <Route path="about" element={<About />}></Route>25 <Route path="*" element={<NotFound />}></Route>26 </Routes>27 </div>28 </div>29 )30}3132export const Home = () => {33 return <div>You are in Home page</div>34}35export const About = () => {36 return <div>This is the page where you put details about yourself</div>37}38export const NotFound = () => {39 return <div>This is a 404 page</div>40}4142export default App
In the above code:
We are having a few navigation links, which are defined using the Link
component.
The to
property will determine the URL to which the user needs to be navigated.
The component that needs to be rendered when the user is navigated to a particular path
is defined by the element
property in the Route
component. For example, /about
route will render the About
component.
If you want to display a 404 page when the path does not match with any of the routes then you can define a route with path as *
.
Finally, we need to wrap all the Route
components inside the Routes
component, which is again exported from react-router-dom
.
The order of Route
components does not matter. React router will match the best route irrespective of order.
Before running our app, let's add some basic styling:
1body {2 margin: 0 auto;3 max-width: 900px;4}5nav ul {6 display: flex;7 list-style-type: none;8 margin: 0;9 padding: 0;10 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);11}1213nav a {14 text-decoration: none;15 display: inline-block;16 padding: 1rem;17}18.main {19 padding: 1rem;20}
Now run the application and navigate through the links and you should be able to see the appropriate components being rendered.
You would have observed that /dashboard lands in 404 page. This is because we do not have a dashboard route defined yet.
Also, you would see that we have created the Home
and About
component within App.js
,
we can have the components defined in their own files. So let's create Dashboard
component inside Dashboard.js
file:
1import React from "react"23const Dashboard = () => {4 return <div>Dashboard</div>5}67export default Dashboard
Now import it in App.js
and add include it in the list of Routes:
1//...23import Dashboard from "./Dashboard"45function App() {6 return (7 <div className="App">8 <nav>{/* ... */}</nav>9 <div className="main">10 <Routes>11 <Route path="/" element={<Home />}></Route>12 <Route path="about" element={<About />}></Route>13 <Route path="dashboard" element={<Dashboard />}></Route>14 <Route path="*" element={<NotFound />}></Route>15 </Routes>16 </div>17 </div>18 )19}20//...
Now you should have the dashboard route working.
Since all of our links are navigation links it will be nice to highlight the link which is currently active.
For this purpose we have a special component called NavLink
component.
1//...2import { Routes, Route, NavLink as Link } from "react-router-dom"34function App() {5 return (6 <div className="App">7 <nav>8 <ul>9 <li>10 <Link to="/" activeClassName="active">11 Home12 </Link>13 </li>14 <li>15 <Link to="dashboard" activeClassName="active">16 Dashboard17 </Link>18 </li>19 <li>20 <Link to="about" activeClassName="active">21 About22 </Link>23 </li>24 </ul>25 </nav>26 <div className="main">27 <Routes>{/* ... */}</Routes>28 </div>29 </div>30 )31}3233//...34export default App
In the above code, you will see that we are importing NavLink
as the Link
component and
also we have added activeClassName
property with a value of 'active' to the Link
component.
The active
class will be added to the anchor, whichever matches the current URL.
Now to differentiate the active link, let's add some css:
1/* ... */2nav a.active {3 background-color: #eee;4}
Now if you run the application, you will see the active link having a different background color:
Now you will see that we have a problem! The Home link is highlighted every time.
This is because we have given /
as the path for the Home link and all other page links have /
in them.
So react router does a contains match to provide the active class name.
We can fix this by providing another parameter called end
to our link.
end
property tells react router to match the exact path and add active class name.
1<Link to="/" activeClassName="active" end>2 Home3</Link>
Now you should have the active links working as expected:
In case you want to have pages inside the dashboard page, you can have routes configured inside the Dashboard
component,
thus by nesting the routes under the routes defined in App.js
.
Similar to what we have done in App.js
, set up 3 routes inside Dashboard.js
as shown below:
1import React from "react"2import { Routes, Link, Route } from "react-router-dom"34const Dashboard = () => {5 return (6 <div>7 <ul>8 <li>9 <Link to="">Profile</Link>10 </li>11 <li>12 <Link to="orders">Orders</Link>13 </li>14 <li>15 <Link to="quotes">Quotes</Link>16 </li>17 </ul>18 <div className="dashboard">19 <Routes>20 <Route path="/" element={<Profile />}></Route>21 <Route path="orders" element={<Orders />}></Route>22 <Route path="quotes" element={<Quotes />}></Route>23 </Routes>24 </div>25 </div>26 )27}2829export const Profile = () => {30 return <h2>Profile</h2>31}32export const Orders = () => {33 return <h2>Orders</h2>34}35export const Quotes = () => {36 return <h2>Quotes</h2>37}3839export default Dashboard
Now we need to update the dashboard route in App.js
with a /*
in the end so that it matches all the routes under it:
1<Route path="dashboard/*" element={<Dashboard />}></Route>
Also, let's add some styling:
1/* ... */2.main ul {3 display: flex;4 list-style-type: none;5 margin: 0;6 padding: 0;7}8.main ul li {9 margin-right: 1rem;10}1112.dashboard {13 padding: 1rem 0;14}
Now if you run the app, you will see:
/dashboard/orders
and /dashboard/quotes
,
this is because we nested these routes inside the dashboard route."/"
to Profile
component, so that it loads by default when the user hits /dashboard
route.The next thing we will see is how we can pass URL parameters to a route:
1import React from "react"2import { Routes, Link, Route, useParams } from "react-router-dom"34const Dashboard = () => {5 return (6 <div>7 <ul>8 <li>9 <Link to="">Profile</Link>10 </li>11 <li>12 <Link to="orders">Orders</Link>13 </li>14 <li>15 <Link to="quotes">Quotes</Link>16 </li>17 </ul>18 <div className="dashboard">19 <Routes>20 <Route path="/" element={<Profile />}></Route>21 <Route path="orders" element={<Orders />}></Route>22 <Route path="quotes" element={<Quotes />}></Route>23 <Route path="order_details/:orderId" element={<OrderDetails />} />24 </Routes>25 </div>26 </div>27 )28}2930export const Profile = () => {31 return <h2>Profile</h2>32}33export const Orders = () => {34 const orderIds = ["10001", "10002", "10003"]35 return (36 <>37 <h2>Orders</h2>38 <ul className="orders">39 {/* Loop through the orders array and display link to order details */}40 {orderIds.map(orderId => {41 return (42 <li key={orderId}>43 <Link to={`/dashboard/order_details/${orderId}`}>44 View Order {orderId}45 </Link>46 </li>47 )48 })}49 </ul>50 </>51 )52}53export const Quotes = () => {54 return <h2>Quotes</h2>55}56export const OrderDetails = () => {57 const params = useParams()5859 return <h2>Details of order {params.orderId}</h2>60}6162export default Dashboard
In the above code:
order_details
route and we are appending it with the order id.:orderId
to the route configuration in Orders
component.useParams
hook that can be imported from the react-router-dom
to retrieve the value of orderId
and display it.Before testing the application let's add some css:
1/* ... */2ul.orders {3 flex-direction: column;4 border: 1px solid;5 padding: 0.5rem;6}7.orders li {8 padding: 0.5rem 0;9}
Now if you run run the app, you will see that we can retrieve the orderId
parameter from the URL:
If you want to perform navigation on certain user action,
say on click of a button, react router provides us with a hook for it called useNavigate
.
Now we have order details page, we can add a link back to orders page and implement it using useNavigate
.
1//...23import { Routes, Link, Route, useParams, useNavigate } from "react-router-dom"45//...67export const OrderDetails = () => {8 const params = useParams()9 const navigate = useNavigate()1011 const onBackClick = e => {12 e.preventDefault()13 // navigate(-1);14 navigate("/dashboard/orders")15 }1617 return (18 <>19 <h2>Details of order {params.orderId}</h2>20 <a href="#" onClick={onBackClick}>21 Back to Orders22 </a>23 </>24 )25}
We can pass the absolute path where the user needs to be navigated or call navigate(-1)
to go back a page.
It is not necessary to configure the routes as a component and wrap it inside the Routes
component.
We can specify the route configuration in a JSON object as well.
This will help when we have dynamic routes and we get the route details from an API call.
Create a new component called RouteAsObj
with the below code
1import React from "react"2import { useRoutes, Outlet } from "react-router"3import { Link } from "react-router-dom"45const RouteAsObj = () => {6 let element = useRoutes([7 { path: "/", element: <Route1 /> },8 { path: "route2", element: <Route2 /> },9 {10 path: "route3",11 element: <Route3 />,12 // children can be used to configure nested routes13 children: [14 { path: "child1", element: <Child1 /> },15 { path: "child2", element: <Child2 /> },16 ],17 },18 { path: "*", element: <NotFound /> },19 ])2021 return (22 <div>23 <ul>24 <li>25 <Link to="">Route1</Link>26 </li>27 <li>28 <Link to="route2">Route2</Link>29 </li>30 <li>31 <Link to="route3">Route3</Link>32 </li>33 </ul>34 {element}35 </div>36 )37}3839const Route1 = () => <h1>Route1</h1>40const Route2 = () => <h1>Route2</h1>41const Route3 = () => {42 return (43 <div>44 <h1>Route3</h1>45 <ul>46 <li>47 <Link to="child1">Child1</Link>48 </li>49 <li>50 <Link to="child2">Child2</Link>51 </li>52 </ul>53 <Outlet />54 </div>55 )56}57const Child1 = () => <h2>Child1</h2>58const Child2 = () => <h2>Child2</h2>59const NotFound = () => <h1>NotFound</h1>6061export default RouteAsObj
In the above code:
useRoutes
hook and passing our route configuration to it.
The useRoutes
either returns a valid react component, which we have embedded in the component as element
.<Outlet />
component inside the Route3
.
This will help in rendering the matching child route, when the routes are nested.Now let's include the route in the App.js
1import React from "react"2import { Routes, Route, NavLink as Link } from "react-router-dom"3import Dashboard from "./Dashboard"4import RouteAsObj from "./RouteAsObj"56function App() {7 return (8 <div className="App">9 <nav>10 <ul>11 <li>12 <Link to="/" activeClassName="active" end>13 Home14 </Link>15 </li>16 <li>17 <Link to="dashboard" activeClassName="active">18 Dashboard19 </Link>20 </li>21 <li>22 <Link to="about" activeClassName="active">23 About24 </Link>25 </li>26 <li>27 <Link to="/object_route" activeClassName="active">28 Route as Object29 </Link>30 </li>31 </ul>32 </nav>33 <div className="main">34 <Routes>35 <Route path="/" element={<Home />}></Route>36 <Route path="about" element={<About />}></Route>37 <Route path="dashboard/*" element={<Dashboard />}></Route>38 <Route path="object_route/*" element={<RouteAsObj />}></Route>39 <Route path="*" element={<NotFound />}></Route>40 </Routes>41 </div>42 </div>43 )44}4546//...47export default App
Now if you run the app you would see the routes working as expected:
You might encounter scenarios where you need to extract the query parameters.
This can be done by using the useLocation
hook provided by react router.
Let's create a Search component with a search form:
1import React, { useRef } from "react"2import { useLocation, useNavigate } from "react-router-dom"34function useQuery() {5 // Use the URLSearchParams API to extract the query parameters6 // useLocation().search will have the query parameters eg: ?foo=bar&a=b7 return new URLSearchParams(useLocation().search)8}910const Search = () => {11 const query = useQuery()1213 const term = query.get("term")1415 const inputRef = useRef(null)16 const navigate = useNavigate()1718 const formSubmitHandler = e => {19 //prevent the default form submission20 e.preventDefault()2122 //extract search term using refs.23 const searchValue = inputRef.current.value24 navigate(`?term=${searchValue}`)25 }2627 return (28 <div>29 <form action="" onSubmit={formSubmitHandler}>30 <input type="text" name="term" ref={inputRef} />31 <input type="submit" value="Search" />32 {/* Display the search term if it is present */}33 {term && <h2>Results for '{term}'</h2>}34 </form>35 </div>36 )37}3839export default Search
Here we are using yet another hook called useLocation
, which will return the URL details.
The search
property within it will have the query string.
We have made use of
URLSearchParams
API to extract the query parameters.
We have included this in a custom hook called useQuery
,
which is later used to extract the search term using the query.get("term")
call inside Search component.
Now let's include a route to search page in the App
component:
1//...2import Search from "./Search"34function App() {5 return (6 <div className="App">7 <nav>8 <ul>9 {/* Other Links */}10 <li>11 <Link to="/search" activeClassName="active">12 Search13 </Link>14 </li>15 </ul>16 </nav>17 <div className="main">18 <Routes>19 {/* Other Routes */}20 <Route path="search" element={<Search />}></Route>21 <Route path="*" element={<NotFound />}></Route>22 </Routes>23 </div>24 </div>25 )26}2728//...
Now if we run the app and search for something, we will see that it is displaying the searched term:
You will have certain pages in your application that needs to be accessed only by logged in users.
We can secure such routes by writing a wrapper around the Route
component.
Before writing the Route component, let's create a fake authentication function:
1export const fakeAuth = {2 isAuthenticated: false,3 login(callBack) {4 fakeAuth.isAuthenticated = true5 callBack()6 },7 logout(callBack) {8 fakeAuth.isAuthenticated = false9 callBack()10 },11}
Here we have isAuthenticated
property, which will be set to true
and false
by the login
and logout
functions.
These functions will also call the passed callback function.
Now let's create a protected page, which needs to be secured from unauthorized access.
1import React from "react"2import { fakeAuth } from "./fakeAuth"3import { useNavigate } from "react-router-dom"45const ProtectedPage = () => {6 const navigate = useNavigate()7 return (8 <div>9 <p>You are logged in. Welcome to protected page!</p>10 <button11 onClick={() => {12 fakeAuth.logout(() =>13 navigate("/login", { state: { from: { pathname: "/protected" } } })14 )15 }}16 >17 Sign out18 </button>19 </div>20 )21}2223export default ProtectedPage
Here we are showing a welcome message and a logout button, on click of which user will be redirected to login page.
Notice that we are passing the state
as the second argument to navigate
function,
this will be used to redirect the user to /protected
route after login.
Now let's create the login page. Here we are having a login button,
on click of which we will call the fake login function and redirect the user to the pathname passed in the state.
In our case it will have the value as /protected
.
1import React from "react"2import { useNavigate, useLocation } from "react-router-dom"3import { fakeAuth } from "./fakeAuth"45function LoginPage() {6 let navigate = useNavigate()7 let location = useLocation()89 let { from } = location.state || { from: { pathname: "/" } }10 let login = () => {11 fakeAuth.login(() => {12 navigate(from)13 })14 }1516 return (17 <div>18 <p>You must log in to view the page at {from.pathname}</p>19 <button onClick={login}>Log in</button>20 </div>21 )22}2324export default LoginPage
Now let's create the private route we mentioned earlier:
1import React from "react"2import { Route, Navigate, useLocation } from "react-router-dom"3import { fakeAuth } from "./fakeAuth"45/**6 * A wrapper around the element which checks if the user is authenticated7 * If authenticated, renders the passed element8 * If not authenticated, redirects the user to Login page.9 */10const PrivateElement = ({ element }) => {11 let location = useLocation()12 return fakeAuth.isAuthenticated ? (13 element14 ) : (15 <Navigate to="/login" state={{ from: location }} />16 )17}1819function PrivateRoute({ element, ...rest }) {20 return <Route {...rest} element={<PrivateElement element={element} />} />21}2223export default PrivateRoute
As you can see, the above route is a wrapper around the Route
component to check if the user is authenticated.
If the user is authenticated then it renders the passed element otherwise
redirect the user to login page using the Navigate
component.
Navigate
component is another way of redirecting the user to another page.
We are also passing the from location to the login route so that user can be redirected back to the actual route once they log in.
Now let's wire up everything to App.js
:
1import React from "react"2import { NavLink as Link, Route, Routes } from "react-router-dom"3import Dashboard from "./Dashboard"4import LoginPage from "./LoginPage"5import PrivateRoute from "./PrivateRoute"6import ProtectedPage from "./ProtectedPage"7import RouteAsObj from "./RouteAsObj"8import Search from "./Search"910function App() {11 return (12 <div className="App">13 <nav>14 <ul>15 <li>16 <Link to="/" activeClassName="active" end>17 Home18 </Link>19 </li>20 <li>21 <Link to="/dashboard" activeClassName="active">22 Dashboard23 </Link>24 </li>25 <li>26 <Link to="/about" activeClassName="active">27 About28 </Link>29 </li>30 <li>31 <Link to="/object_route" activeClassName="active">32 Route as Object33 </Link>34 </li>35 <li>36 <Link to="/search" activeClassName="active">37 Search38 </Link>39 </li>40 <li>41 <Link to="/public" activeClassName="active">42 Public Page43 </Link>44 </li>45 <li>46 <Link to="/protected" activeClassName="active">47 Protected Page48 </Link>49 </li>50 </ul>51 </nav>52 <div className="main">53 <Routes>54 <Route path="/" element={<Home />}></Route>5556 <Route path="about" element={<About />}></Route>57 <Route path="dashboard/*" element={<Dashboard />}></Route>58 <Route path="object_route/*" element={<RouteAsObj />}></Route>59 <Route path="search" element={<Search />}></Route>60 <Route path="public" element={<PublicPage />}></Route>61 <PrivateRoute62 path="protected"63 element={<ProtectedPage />}64 ></PrivateRoute>65 <Route path="login" element={<LoginPage />}></Route>66 <Route path="*" element={<NotFound />}></Route>67 </Routes>68 </div>69 </div>70 )71}7273export const Home = () => {74 return <div>You are in Home page</div>75}76export const About = () => {77 return <div>This is the page where you put details about yourself</div>78}79export const PublicPage = () => {80 return <div>This page can be accessed by anyone</div>81}82export const NotFound = () => {83 return <div>This is a 404 page</div>84}8586export default App
If you run the application now:
When we have lot of pages in out application, we will end up having lot of code. We don't want our user to download all the code when they just load the home page. In order to package code of different routes to separate chunks, along with react router we can make use of loadable components, which takes advantage of dynamic imports.
To start with, install the following package:
1yarn add @loadable/component
In the App.js
, let's import the Dashboard
component dynamically and pass it to the loadable
function.
It also accepts a second argument, which has a fallback
property, which needs a component name as the argument.
This fallback component will be rendered while the js code is being downloaded.
Also, if the component js fails to load, the fallback component will remain being shown.
1import loadable from "@loadable/component"2import React from "react"3import { NavLink as Link, Route, Routes } from "react-router-dom"4import LoginPage from "./LoginPage"5import PrivateRoute from "./PrivateRoute"6import ProtectedPage from "./ProtectedPage"7import RouteAsObj from "./RouteAsObj"8import Search from "./Search"910const Loading = () => {11 return <div>Loading...</div>12}1314const Dashboard = loadable(() => import("./Dashboard.js"), {15 fallback: <Loading />,16})1718function App() {19 return (20 <div className="App">21 <nav>22 <ul>23 <li>24 <Link to="/" activeClassName="active" end>25 Home26 </Link>27 </li>28 <li>29 <Link to="/dashboard" activeClassName="active">30 Dashboard31 </Link>32 </li>33 <li>34 <Link to="/about" activeClassName="active">35 About36 </Link>37 </li>38 <li>39 <Link to="/object_route" activeClassName="active">40 Route as Object41 </Link>42 </li>43 <li>44 <Link to="/search" activeClassName="active">45 Search46 </Link>47 </li>48 <li>49 <Link to="/public" activeClassName="active">50 Public Page51 </Link>52 </li>53 <li>54 <Link to="/protected" activeClassName="active">55 Protected Page56 </Link>57 </li>58 </ul>59 </nav>60 <div className="main">61 <Routes>62 <Route path="/" element={<Home />}></Route>6364 <Route path="about" element={<About />}></Route>65 <Route path="dashboard/*" element={<Dashboard />}></Route>66 <Route path="object_route/*" element={<RouteAsObj />}></Route>67 <Route path="search" element={<Search />}></Route>68 <Route path="public" element={<PublicPage />}></Route>69 <PrivateRoute70 path="protected"71 element={<ProtectedPage />}72 ></PrivateRoute>73 <Route path="login" element={<LoginPage />}></Route>74 <Route path="*" element={<NotFound />}></Route>75 </Routes>76 </div>77 </div>78 )79}8081export const Home = () => {82 return <div>You are in Home page</div>83}84export const About = () => {85 return <div>This is the page where you put details about yourself</div>86}87export const PublicPage = () => {88 return <div>This page can be accessed by anyone</div>89}90export const NotFound = () => {91 return <div>This is a 404 page</div>92}9394export default App
Now if you open the browsers network tab and load the home page, you would see a bunch of files being loaded:
Now clear the network logs and click on dashboard link and you will observe a new js file being loaded, which is responsible for rendering the contents inside dashboard:
You can view the complete source code here and a demo here.
Leave a Comment