Traditional web apps require full-page reloads for almost every click the user makes. SPAs, on the other hand, load a single HTML page and update the page contents dynamically as users interact with the application. This dynamism mimics the feel of desktop applications and results in better responsive interactions.

Before moving any further:

To follow along with what I'll discuss in this article, you should have some basic knowledge of React and how to set up a React project. If you already do, let's crack on.

What are React Router and React Router DOM?

React router is a powerful library that manages navigation and routing in React applications. The React Router DOM is used specifically for web applications and has few DOM-specific APIs.

As we dive into the world of React Router DOM, we'll explore its core concepts while demonstrating their implementation in a React application. Our focus will be on building a simple navigation system with links to different components, illustrating how to configure routes, handle route matching, and implement navigation.

By the end of this article, you'll have a solid understanding of how to use React Router DOM to create dynamic and seamless navigation experiences in your single-page applications.

How to Install React Router

As I explained above, React-router-DOM is used exclusively for integrating routing functionalities into web applications. So, in order to use it in your React app, you need to install the react-router-dom package by running this command in your React app terminal:

npm install react-router-dom

After successfully installing it, you can now start routing in your React project.

Core Concepts in React Router DOM

BrowserRouter

BrowserRouter a parent component that houses all the route components. All routes that you use in an application must be declared within the BrowserRouter. Most importantly, it stores the current location in the browser's address bar using URLs which comes in handy during navigation.

To use the BrowserRouter, you'll need to import it from the react-router-dom in your App.jsx file.

import { BrowserRouter } from "react-router-dom";

function App() {

  return (
    <BrowserRouter>

    </BrowserRouter>
  );
}

export default App;

The BrowserRouter has a basename attribute used to set base URL for all routes in an application. It's important if your app is hosted in a subdirectory on a domain.

<BrowserRouter basename="/shop">

</BrowserRouter>

Adding /shop as a basename will make sure that all route paths are relative to /shop.

Routes

This component is a direct replacement for switch which was used in the former versions of React Router. It also acts like a parent and renders the first matching child route, which ensures that the correct component is displayed based on the current URL.

To declare routes, import routes from react-router-dom and position it within the BrowserRouter component.

import { BrowserRouter, routes } from "react-router-dom";

function App() {

  return (
    <BrowserRouter>
        <Routes>

        </Routes>
    </BrowserRouter>
  );
}

export default App;

Route

Route a child component that consists of two attributes: path and element. A path can be any specified path name while the element attribute is the component that should be rendered. A route renders a specific component when the path specified matches a URL.

An application can have as many routes as it needs, and they must all be declared inside the Routes component. Assuming we have a <Home\> and <Pricing\> component, we will have to import the Route component and position it within the Routes.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Undeclared Routes

There is a way to handle routes that do not exist in your application, just like an Error 404 page. To do this, create another component bearing a Not Found message and the route added.

Set the path name to * and pass the component as the element.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Nested Routes

In some cases, routes can have children or sub-routes.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="categories" element={<Categories/>}>
                    <Route path="male" element={<Male/>}/>
                        <Route path="female" element={<Female/>}/>
                </Route>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

On navigating to the nested elements, the URL on the browser will be reading something like /categories/male and /categories/female.

Link

This acts like an anchor href attribute. It has a to attribute which specifies where the Link will take the user after a click. Usually, it is the path to a component's page that is passed to the to attribute.

Links are typically put in a Navbar component, so we will put two Links that point to the components path in our already declared Routes.

import { Link } from "react-router-dom";
export default function PageNav() {
  return (
  <>
        <Link to="/">Home</Link>
        <Link to="pricing">Pricing</Link>
  </>
  );
}

NB: If you are practicing along while reading this article, it is important to note that the PageNav component created here should be situated in your App.jsx and specifically just after the opening BrowserRouter tag before the Routes. This is to ensure the PageNav always stays at the top like a navigation menu despite routing through different components.

import { BrowserRouter, Routes, Route } from "react-router-dom";

//ALL COMPONENTS IMPORTS COMES HERE

function App() {

  return (
    <BrowserRouter>
        <PageNav/>
        <Routes>
            <Route path="/" element={<Home/>}/>
                <Route path="pricing" element={<Pricing/>}/>
                <Route path="categories" element={<Categories/>}>
                    <Route path="male" element={<Male/>}/>
                        <Route path="female" element={<Female/>}/>
                </Route>
                <Route path="*" element={<PageNotFound/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

NavLink

NavLink performs the same function as Link and has a to attribute as well. But it's different as it has a class attribute. The class attributes are active, isPending, and isTransitioning. This makes it more versatile than Link and you can use it to conditionally add styles during user interactions.

import { NavLink } from "react-router-dom";
export default function PageNav() {
  return (
      <>
        <NavLink to="/">Home</NavLink>
        <NavLink to="pricing">Pricing</NavLink>
    </>
  );
  }

Outlet

Having child elements inside a parent route element means there is a layer of abstraction in rendering the child routes' UI. This is where the Outlet component comes into play. You add it to the parent route – in our example, it would be the Categories component.

import { NavLink, Outlet } from "react-router-dom";
export default function Categories() {
  return (
 <>
          <NavLink to="men">
            Men
          </NavLink>
          <NavLink to="women">
            Women
          </NavLink>
      <Outlet />
</>
  );
}

This allows for the rendering of the child routes UI in the nested route.

Image showing children nested routes in Categories route

useNavigate Hook

This hook returns a function that enables programmatic navigation between routes.

There are several ways to use the navigate function in your application. First, we need to import the useNavigate hook and initialize it as navigate.

import { useNavigate } from "react-router-dom";

export default function Homepage() {
  const navigate = useNavigate();

  return (
    <>
      <h1>This is the Homepage</h1>


    </>
  );
}

We can use navigate in the following ways in our application:

• Attaching it to a button via the onClick prop with the intended path to be navigated to, passed to the navigate function.

 <button onClick={() => navigate("/categories")}>Go to Categories</button>

• Using it with a Link component.

<Link to={navigate("/categories")}>Go to Categories</Link>

• Using a number instead of the component path in the navigate function. The number should specify the number of navigations backward in the history stack where you would like to go.

<Link to={navigate(-1)}>Go one step backwards</Link>

useParams Hook

Returns an object of the dynamic params gotten from the current URL matched by the Route's path. The parent routes pass all params to their child routes.

The example below shows an OrderPage component that will be rendered for every customer with their unique id. When the URL matches /customer/123, :id will be 123.

import { useParams } from "react-router-dom";

function App() {
  const {id} = useParams()
  return (
    <BrowserRouter>
        <Routes>
        <Route path="customer">
            <Route path=":id" element={<OrderPage/>}/>
           </Route>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

Final Result

At this point, we've fully implemented React Router in our small navigation project. This is what it looks like in full flow:

For more detailed information and concepts about React router, you can visit the Official React Router documentation site.

Conclusion

In this article, we've explored the concepts and implementation of Client Side Routing (CSR) in a React web application. React Router, through its web-centric library React-Router-DOM, enables CSR, allowing apps to update the URL with a click of a link without making a server request for a new document.

This functionality enhances the user experience by providing faster navigation and a more seamless interaction within the application. By leveraging CSR, developers can build more efficient and responsive single-page applications (SPAs), ultimately improving performance and user satisfaction.

If you enjoyed reading this article, you could Buy me a Coffee.

Want to see more of these? Connect with me on LinkedIn.

See you on the next one!

Happy Coding!

It's a no-brainer that humans love beautiful things. We all love products that look easy on the eyes.

In this article, we're going to learn how to create animations that wow users with the use of Framer motion and React-Router-Dom.

Prerequisites

To be able to follow what we're doing in this article, you should have some knowledge of React, Framer motion and React-Router-DOM.

To learn Framer motion better, you can study their documentation.

Node.js should also be installed on your system, and you should have a working code editor. I'll be using VS Code.

How to Set Up the Project

To set up our project we're going to use Vite to set up our React development environment.

1. Open the terminal in VScode. You can use Ctrl + backtick(`)

2. In your terminal, enter the following command:

npm create vite@latest

3. Follow the prompts to name your project and choose your desired framework. In our case, we're using React. This will be a JavaScript project.

4. Go to your project directory and use npm i in the terminal.

5. To start your project use npm run dev.

6. Remember to clean your project by removing the code in App.js and your CSS files in the src folder.

How to Initialize Framer Motion and React-Router-Dom

1. To install Framer-motion in your project open the terminal and enter:

npm i framer-motion

2. To install React-Router-DOM in your project open the terminal and enter:

npm i react-router-dom

How to Set Up Components and Basic Routing with React-Router-DOM

Let's set up our components and the pages we'll be routing to for this project.

1. In src, create a new folder named components.

2. We'll add four files in this folder named Home.jsx, About.jsx, Projects.jsx and Navbar.jsx.

3. Inside the first three, we're going to create a React functional component. Change the content of the h1 tag in each component:

const Home = () => {
 return (
    <div>
     <h1>Home</h1>
    </div>
 )
 }

 export default Home

4. In the Navbar, we need to import Link from React-Router-DOM to create anchor elements. We then need to create a container housing our logo and nav links. The logo will link the points to our index page.

import {Link} from "react-router-dom"

const Navbar () => {
 return (
     <div className="nav">
      <div className="logo">
         <Link className="nav-link" to="/">Lennythedev</Link>
     </div>
     <div>
        <div className="nav-links">
           <div className="nav-item">
            <Link className="nav-link" to="/">Home</Link>
           </div>
           <div className="nav-item">
            <Link className="nav-link" to="/">About</Link>
           </div>
           <div className="nav-item">
            <Link className="nav-link" to="/">Projects</Link>
           </div>
     </div>
     </div>
     </div>
  )
 }

5. Now let's go to our index.js or main.js file. The goal is to wrap our entire app with BrowserRouter which will enable routing within our application.

import React from "react"
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path='/*' element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>,
)

6. Now in App.js, we're going to complete the final step of our configuration. We'll import our components, and some features from React-Router-DOM and render our components. By using useLocation feature from React-Router-DOM, we can set the current location of the routes by setting the key to the current path.

import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';

function App() {
  const location = useLocation();
  return (
    <>
       <NavBar />
       <AnimatePresence mode='wait'>
       <Routes location={location} key={location.pathname}>
        <Route index element={<Home />} />
        <Route path='/projects' element={<Projects />}/>
        <Route path='/about' element={<About />}/>
       </Routes>
       </AnimatePresence>
    </>
  )
}

export default App

7. Now we can add our styling in App.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
  font-family: "Fira Sans Condensed", sans-serif;
}

html,
body {
  font-family: "Fira Sans Condensed", sans-serif;
  background: rgb(0, 162, 255);
}

.nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  cursor: pointer;
}

.logo, .nav-item {
  margin: 2em;
  font-weight: 400;
  font-size: 1.5vw;
}

h1{
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 500;
  font-size: 10vw;
  line-height: 1;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  font-weight: 500;
}

8. After following all the steps your app should look like this:

styled webpage without animation

How to Create Transitions Using Framer Motion

Finally let's create our animation for transitions between pages.

1. Create a file in components named Box.jsx and import motion from framer-motion.

2. We can then return two divs, with classNames of slide-in and slide-out one for sliding in and another for sliding out.

3. We insert our animation in these divs with the help of framer-motion:

import { motion } from "framer-motion"

export default function Box() {
  return(
    <div>
     <motion.div
        className="slide-in"
        initial={{ scaleY: 0 }}
        animate={{ scaleY: 0 }}
        exit={{ scaleY: 1 }}
        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
     />
     <motion.div
     className="slide-out"
        initial={{ scaleY: 1 }}
        animate={{ scaleY: 0 }}
        exit={{ scaleY: 0 }}
        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
     />
    </div>
  )
}

4. Next, we add our styling in our CSS file for slide-in and slide-out in our App.css

.slide-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #0f0f0f;
  transform-origin: bottom;
}

.slide-out {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: #0f0f0f;
  transform-origin: top;
}

5. Finally, the last step is to use AnimatePresence from framer-motion in our App.js file and wrap the entire App in AnimatePresence and set the mode as wait. If you want to learn more about a AnimatePresence visit the framer-motion docs.

import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';
import { AnimatePresence } from 'framer-motion';

function App() {
  const location = useLocation();
  return (
    <>
       <NavBar />
       <AnimatePresence mode='wait'>
       <Routes location={location} key={location.pathname}>
        <Route index element={<Home />} />
        <Route path='/projects' element={<Projects />}/>
        <Route path='/about' element={<About />}/>
       </Routes>
       </AnimatePresence>
    </>
  )
}

export default App

6. Finally, our work should look the same as the video below:

Conclusion

Creating multi-page animations with Framer Motion and React-Router-Dom enhances user experience by providing smooth transitions.

This integration leverages the power of Framer Motion's animation capabilities with React-Router-Dom's routing features, resulting in dynamic, interactive web applications.

This is very useful if you just need to navigate the user to a new page. But with the development of web apps, there's more need for pages to render on the client or load dynamically.

This involves updating particular parts of the URL called segments, as well as rendering new content or updating the content on the same page without making a request from the server or reloading the entire page.

This is very common and useful in modern web apps. It enables client-side rendering, improves website navigation, and enables smooth transitions and animations (since the browser doesn't need to reload the page from external servers).

This can overall improve website performance and enable a good user experience.

In this tutorial, you'll learn about Dynamic Segments in React Router.

We'll go over what Dynamic Routing is and how it’s different from Static Routing. We'll also cover how to use useParams to enable Dynamic Segments, and how to set your path when getting data from an API.

Lastly, we’ll build a new project that dynamically renders new content to the same page when the user clicks on the sidebar.

By the end of this guide, you should be able to implement dynamic segments on your own in your React app.

Table of Contents

• Prerequisites
• Project Setup
• Installations
  • Install React
  • Install React Router
  • Install Feather Icon
  • Install Tailwind CSS
• Client-Side Routing
• Dynamic Segments
• Nested Routing
• Project: Build an Art Gallery
  • Project Overview
  • Folder Structure
  • How to Set Up the Home Page
  • How to Create and Style the Navbar
  • How to Create the AsideBar
  • How to Create the Content Component
• Summary

Prerequisites

To follow along, you'll need a basic knowledge of the following:

• React
• React-Router
• Tailwind CSS (optional)

Project Setup

To get started, create a folder called dynamic-segment and open it in VS Code (or your code editor of choice):

Next, click on Ctrl + (backtick) to launch the terminal as indicated above. This will enable us to install the npm packages we’ll be using in this project.

Installations

Now that we have our project set up, let’s install the npm packages that we need to get our project up and running.

Install React

React is a JavaScript library for building reusable and interactive components. To install it, copy and paste the command provided by vite.js below.

npm create vite@latest

Then just follow the installing guide to finish the process. Once the installation is complete, the node_modules folder should be present in your project folder.

Install React Router

This is a React routing library for creating client-side routing applications. To install it, copy and paste the command below and press enter.

npm i react-router-dom

Install Feather Icon

Feather icon is a small yet beautiful collection of 24 x 24 grid open-source icons. It's built for adding flat icons on web applications.

To install it, paste the command below and press enter.

npm i react-feather

Install Tailwind CSS

Tailwind is a utility-first CSS framework for building beautiful and compact website designs. To install it, run the command on the terminal below.

npm install -D tailwindcss postcss autoprefixer

This will create a tailwind.config.js file. Next, generate your postcss.config.js files with the command below:

npx tailwindcss init -p

Next, configure your template paths and add the paths to all of your template files in your tailwind.config.js file. Then click ctrl + s to save.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, delete all CSS styles in the ./src/index.css file and add the Tailwind directives @tailwind for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

Next, delete the assets folder, the App.css and App.jsx files from the /src folder. Once you’ve done that, configure the main.jsx files as the route component as indicated below:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css';

import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route
} from 'react-router-dom';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path='/' element={<p className='text-blue-700'>Hello, world</p>}></Route>
    </Route>
  )
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Next, run the below command in the terminal to launch your app:

npm run dev

Your app should look like this in your browser:

Client-Side Routing

In React Router, navigation is relative between the path attribute and the to property. When a user clicks using the <Link> component (<a> tag), it navigates to the specified path within the route component and renders the component when it matches.

This type of navigation is called client-side routing because we are not rendering the pages from the server, but rather navigating from one component to another within the app.

The example below explains how client siding routing works:

⚠️ //main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css';
nt
import 
{
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route
} from 'react-router-dom';
import Book from './book';
import Bookshop from './bookshop';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
     👉 <Route path='/' element={<Book />}></Route>
     👉 <Route path='bookshop' element={<Bookshop />}></Route>
    </Route>
  )
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

From the code example above, we imported two components, Book and Bookshop, and link them via the <a> tag and the Route component on the ./src/main.jsx component.

⚠️ //book.jsx

export default function Book() {
return (
    <>
        <main className="px-4">
            <ul>
                <ol>77 Ways get to more customers By: <i>Ubuy</i></ol>
                <ol>Authenticity By: <i>Emanuel Rose</i> </ol>
                <ol> Change Your thinking change your life By: <i>Brian Tracy</i></ol>

            👉 <a href="bookshop" className="text-blue-600 inline-block px-4 underline">see bookshop</a>
                {/* <a href="publisher/itemId" className="text-blue-600 underline">Publisher</a> */}
            </ul>
        </main>
    </>
)
}

The href attribute accepts the bookshop component as a relative path. So clicking the link should navigate you to the bookshop component.

⚠️ //bookshop.jsx

export default function Bookshop() {
  return (
    <div className="px-4">
    <h1>list of book shops</h1>
    <ul>
        <li>Book Shop & Stationery</li>
        <li>Simon books</li>
        <li>Dynamic Book home</li>
    </ul>

  👉 <a href="/" className="text-blue-600 inline-block px-4 underline">Names of Books</a>
</div>
  )
}

The href=”/” in the bookshop component specifies the index route and should navigate you back to the home components.

Your app should look like this on your browser – click to navigate to the bookshop component.

From the browser output above, you'll notice how the URL is updated from the address bar and a new component is rendered.

The type of routing is called client-side routing and only updates the URL path once with the new route.

In the next section, I'll explain how you can update a particular segment and render content dynamically.

Dynamic Segments

A Dynamic Segment, as the name suggests, is a way of rendering a new component (UI) by updating a particular segment in the URL called params. You use the useParams hook from react-router-dom to do this.

This is very useful in situations where content needs to render dynamically from a particular component or third-party API.

Continuing from where we stopped in the code, go to the ./src/main.jsx component. Edit the Route and add :itemId to the path as indicated below:

⚠️ //main.jsx

<Route>
      <Route path='/' element={<Book />}></Route>
      <Route path='bookshop' element={<Bookshop />} />
 👉  <Route path='publisher/:itemId' element={<Publisher />} />
    </Route>

Note that the : in the :itemId URL segment means Dynamic Segment.

Next, create a new component as ./src/publisher.jsx and add the code below:

⚠️ //publisher.jsx

import { useParams } from "react-router-dom"

export default function Publisher() {
    const { itemId } = useParams();

return (
    <>
    {
        itemId ? (
            <div>
                <h1>Book publishing companies</h1>
                <ul>
                    <ol>Penguin Random House</ol>
                    <ol>Scholastic</ol>
                    <ol>LPI Media</ol>
                </ul>
            </div>
        ) : (
            <p>Page item is not present</p>
        )
    }
    </>
)
}

Let's talk about what this code is doing:

• const { itemId } = useParams(): here we apply destructuring to get the params from the URL in the address bar. With this, we can render the return content.
• itemId?():: here we conditionally render a list of bookshop companies when a clicked link matches the params.

Next, in the ./src/book component, include the publisher/itemId as indicated in the <a> tag below:

⚠️ //book.jsx

export default function Book() {
return (
    <>
        <main className="px-4">
            <ul>
                <ol>77 Ways get to more customers By: <i>Ubuy</i></ol>
                <ol>Authenticity By: <i>Emanuel Rose</i> </ol>
                <ol> Change Your thinking change your life By: <i>Brian Tracy</i></ol>

                <a href="bookshop" className="text-blue-600 inline-block px-4 underline">see bookshop</a>
            👉  <a href="publisher/itemId" className="text-blue-600 underline">Publisher</a>
            </ul>
        </main>
    </>
)
}

Your app should look like this in your browser:

Notice the update in the URL at the browser address bar.

Let's look at another example.

In a real-world application, Dynamic Segments are mostly used to render content dynamically when the segment :itemId matches the id of the returned APIs.

Let’s see how this works. First, we need to decide where we will be fetching our data from. In this case, create an external JavaScript object ./scr/books.js and copy and paste the code below:

⚠️ //books.js

export default [
    {   id: "1",
        title: "The Great Gatsby",
        author: "F. Scott Fitzgerald",
        year: "1925",
        description: "The Great Gatsby is a 1925 novel by American writer F. Scott Fitzgerald. Set in the Jazz Age on Long Island, near New York City, the novel depicts first-person narrator Nick Carraway's interactions with mysterious millionaire Jay Gatsby and Gatsby's obsession to reunite with his former lover, Daisy Buchanan."
    },

    {   id: "2",
        title: "Pride and Prejudice",
        author: "Jane Austen",
        year: "1813",
        description: "Pride and Prejudice is the second novel by English author Jane Austen, published in 1813. A novel of manners, it follows the character development of Elizabeth Bennet, the protagonist of the book"
    },

    {   id: "3",
        title: "To Kill a Mockingbird",
        author: "Harper Lee",
        year: "1960",
        description: "To Kill a Mockingbird is a novel by the American author Harper Lee. It was published in June 1960 and became instantly successful. In the United States"
    },

    {   id:"4",
        title: "Beloved",
        author: "Toni Morrison",
        year: "1987",
        description: "Beloved is a 1987 novel by American novelist Toni Morrison. Set in the period after the American Civil War, the novel tells the story of a dysfunctional family of formerly enslaved people whose Cincinnati home is haunted by a malevolent spirit"
    }
]

Next, create a new component called ./src/FavBooks.jsx and write in the code below:

⚠️ //FavBooks.js

import { useParams } from 'react-router-dom';
import book from './book';

export default function FavBooks() {
  const {bookId} =  useParams() 

👉 const newFavBook = book.find((book) => book.id === bookId)

  if(!newFavBook){
    return <p>{`This page doesn't contain fav Books`}</p>
  }
  return (
    <>
      <main>
          {newFavBook && (
            <>
              <main>
                <p>{`Title: ${newFavBook.title}`}</p>
                <p>{`By: ${newFavBook.author}`}</p>
                <p>{`Year: ${newFavBook.year}`}</p>
                <p>{`Description: ${newFavBook.description}`}</p>
              </main>
            </>
          )}
      </main>
    </>
  )
}

Next, go to the ./src/book.jsx component and update the code as follows:

import { Link } from 'react-router-dom';
import books from './book.js';

export default function Books() {

  return (
    <>
      <div className='m-4'>
        <p className="text-3xl">{`List of my favourite books`}</p>
      </div>

      <div className='m-4'> 
        {
          books && books.map((book)=> (
            <>
            <ul>
              <li>
                <Link to={`newbooks/${book.id}`} className='text-blue-600 underline'>{book.title}</Link>
              </li>
            </ul>
          </>
          )) 
        }
      </div>
    </>
  )
}

Next, configure the path to dynamic segment on the route component:

import Book from '../src/books';
import Bookshop from './bookshop';
import Publisher from './publisher';
👉 import FavBooks from './FavBooks';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path='/' element={<Book />}></Route>
          <Route path='bookshop' element={<Bookshop />} />
            <Route path='publisher/:itemId' element={<Publisher />} />
     👉 <Route path='newbooks/:bookId' element={<FavBooks />} />
    </Route>
  )
)

Your app should look like this in your browser:

From the browser output, the URL params are being updated with the path segment and the id values from the books.js object.

Try clicking on each of the titles and notice how the id of the books.js object is present in the URL.

When a user clicks the link, it renders a new UI on a new page. But there are cases where you might want to render the content of the API on the same page as list items, so the content doesn’t have to open on a new page. To do this, we have to implement nested routing.

Nested Routing

Nested routing makes it possible to nest routes to render new components on the same page for easy navigation and quick interactivity of the element. Nested routes make listed items function as a tab. As soon as any tab is clicked, the content that matches the corresponding tab gets displayed.

Now let’s see how to convert our little application to a nested route.

To go the ./src/main component and create a nested route as follows:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>

      <Route path='/' element={<Book />} >
   👉  <Route path='newbooks/:bookId' element={<FavBooks />} />
      </Route>

      <Route path='bookshop' element={<Bookshop />} />
      <Route path='publisher/:itemId' element={<Publisher />}>
    </Route>
    </Route>
  )
)

Essentially, we are nesting the FavBook component to the Book component as its direct child, so the content will display below it.

Next, create a div tag and render an outlet component. This is us telling react-router where to render the newly nested route.

return (
    <>
      <div className='m-4'>
        <p className="text-3xl">{`List of my favourite books`}</p>
      </div>

    👉 <section className='flex'>
        <div className='m-4'> 
          {
            books && books.map((book)=> (
              <>
              <ul>
                <li>
                  <Link to={`newbooks/${book.id}`} className='text-blue-600 underline'>{book.title}</Link>
                </li>
              </ul>
            </>
            )) 
          }
        </div>
        <div className='w-[70%]'>
       👉  <Outlet />
        </div>
      </section>
    </>
  )

Note that to render the nested FavBook component side by side, both the outlet and the book list tag are nested in a section tag, and a style of display flex is applied.

Your code should look like this in your browser:

From the browser output, you can see that each listed item functions as a tab, and clicking them renders out the content of the API.

You've learned how to create a dynamic segment. In the next section, we'll build a project to help cement what we’ve learned even further.

Project: Build an Art Gallery

In this project, we are going to build an art gallery app that contains a list of sculpture and art from different countries. This will help you solidify the concepts you've previously learned.

We are going to implement the following features:

• Client Side Routing
• Active Links
• Dynamic Segments
• Nested Routes

Below is a quick overview of what the project will look like.

Project Overview

Here is a complete preview of our project after completion. You can download the source code on 👉 GitHub here.

Folder Structure

This is what the project's folder structure should look like:

📂src
        📂apis
            ├──data.js
        📂components
            ├──AsideBar.jsx
            ├──Content.jsx
            ├──Navbar.jsx
        📂pages
            ├──home.jsx
    ├──index.css
    ├──main.jsx
├──index.html

How to Set Up the Home Page

To set up the home page, create a home component ./src/pages/home.jsx and add the code below:

├──home.jsx

export default function Home() {
return (
    <>
        <main className="">
            <section>
                <p className="text-orange-600">Hello World</p>
            </section>
        </main>
    </>
)
}

Next, go to the main.jsx component. If you don’t have one yet, create it as ./src/main.jsx. then configure the route as follows:

├──main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css';

import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route
} from 'react-router-dom';

import Home from './pages/home';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route  path='/' element={<Home />}>

    </Route>
  )
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Next, type npm run dev to launch your app.

Your app should look like this in your browser:

How to Create and Style the Navbar

Now that we have the home and route component set up, let’s create the navbar component, which is the top component in our app.

Create a component ./src/components/navbar.jsx and add the code below:

├──navbar.jsx

import { Activity, Search } from "react-feather";

export default function Navbar() {
  return (
   <>
    <main className="">
        <header>
            <nav className="flex justify-between bg-slate-200 rounded-3xl py-2">
                {/* logo */}
                <div className="">
                    <Activity className="inline-block ml-10 mr-2 text-orange-500" />
                    <p className="inline-block text-xl">{`Arts & Culture`}</p>
                </div>

                {/* Navlinks */}
                <div className="bg-white rounded-3xl py-1 px-2 mr-5">
                    <Search className="inline-block mr-1 text-slate-500"/>
                    <input type="search" id="site-search" name="q" placeholder="Search anything" className="bg-transparent outline-none text-slate-800"/>
                </div>
            </nav>
        </header>
    </main>
   </>
  )
}

From the code above, the navbar is divided between the logo and the search bar.

• The logo: we import the Activity Icons as a component from the feather icons and apply some Tailwind CSS classes to style it. The icon is set to inline-block so that we can apply space to it. We apply ml-10 and mr-2, which is margin-left of 2.5rem and right 0.5rem with a color of orange (text-orange-500).
• The search: for the search bar, we also imported it from feather icons as a component and applied the following styling: inline-block mr-1 text-slate-500. If you are having a hard time understanding Tailwind CSS classes you can read more about them from the docs here.

To position the logo and search bar side by side, we set the parent header to display flex and justify-content of space-between to apply space in between the logo and search bar.

Next, add the navbar to the route as follows:

├──main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'

import {
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Route
} from "react-router-dom"

👉  import Navbar from './components/Navbar'
        import Home from './pages/home'

const router = createBrowserRouter(
  createRoutesFromElements(
   <Route  path='/' element={<Home />}>
    👉   <Route path='/' element={<Navbar />} /> 
    </Route>
  )
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

From the code above, the Navbar component is nested inside the Home components. This means we have to use an Outlet component to render the Navbar component.

Next, go to the ./src/page/home component, import, and replace the <p> with the Outlet component as indicated below:

├──home.jsx

👉 import { Outlet } from "react-router-dom";

export default function Home() {
return (
    <>
        <main className="">
            <section>
           👉 <Outlet />
            </section>
        </main>
    </>
)
}

Your app should look like this on your browser:

How to Create the AsideBar

The AsideBar is one of the most important components of our app. This is where the names of the cultures will be displayed. This component functions as a tab, and when a user clicks on it, it renders out more details about the culture that was clicked on.

Create a new component as ./src/components/AsideBar.jsx and write in the code below:

├──AsideBar.jsx

import { NavLink } from "react-router-dom"
import data from "../apis/data"

export default function AsideBar() {

    const activeStyle = ({isActive}) =>  {
            return {
                backgroundColor : isActive ? "rgb(154 52 18)" : "",
                color : isActive ? "rgb(255 247 237)" : "",
            }
        }

return (
    <>
        <main className="w-[100%] mt-[2em]">
            <section className="w-[100%]">
                <aside className="w-[fit-content] bg-slate-200 rounded-xl">
                    {
                        data.map((data)=>(
                            <ul key={data.id}>
                                <li className="">
                                    <NavLink className="w-[100%] py-3 px-2 inline-block text-slate-800 hover:bg-orange-200 transition-all whitespace-nowrap border-y-4 " to={`content/${data.id}`} style={activeStyle}>
                                        {data.type}
                                    </NavLink>
                                </li>
                            </ul>
                        ))
                    }
                </aside>
            </section>
        </main>
    </>
)
}

From the code example above, we have our code split into two sections: the data and the NavLink component.

• The data: we imported the data from ./src/apis/data.js and we are mapping each array of objects and returning the data.type as the names of the AsideBar.
• The NavLink: the data returned from data.js is rendered directly on the NavLink component. The NavLink component has two props specified, the style and to props. The style prop received the activeStyle object that indicated what style should be applied to NavLink when its active. The to prop to={content/${data.id}} we pass the data.id as a segment to match with the path of the content components (more on this in the next section). This enables the content to dynamically render when the NavLink is clicked on.

Next, go to the home component and render the AsideBar as indicated below:

├──home.jsx

      import { Outlet } from "react-router-dom";
👉 import AsideBar from "../components/AsideBar";

export default function Home() {
return (
    <>
      👉  <main className="w-[80%] mt-[2em] mx-auto">
            <section>
                <Outlet />
            </section>
            <section>
                <aside>
                 👉 <AsideBar />
                </aside>
            </section>
        </main>
    </>
)
}

Your app should look like this in your browser:

From interacting with the Asidebar, you may have noticed that the page breaks any time you click on the links. This is because the content component is not defined yet. So let’s create it.

How to Create the Content Component

The content component renders the content that is related to a particular link that was clicked.

Create a new component called ./src/components/Content.jsx and add the code below:

├──Content.jsx

import { Link, useParams } from "react-router-dom";
import data from "../apis/data.js";
import { WifiOff } from "react-feather";

export default function Content() {
    const {contentId} = useParams()

    const newData = data.find((data)=> data.id.toString() === contentId)

    if(!contentId){
        return (
            <main className="translate-x-44 translate-y-44">
                <div className="">
                    <WifiOff className="text-slate-400 text-center translate-x-48"/>
                    <p className="text-slate-400">{`Content can't be accessed! click the left nav to reload`}</p>
                </div>
            </main>
        )
    }

return (
    <>
        <main className="w-[80%] mx-auto mt-8"> 
            <section >
                {
                    newData && (
                        <>  
                            {/* Image Over */}
                            <aside className="h-[6em] w-[100%]">
                                <div className="h-[100%]  w-[100%]">
                                    <img src={newData.imgHeaders} alt="" className="h-[100%]  w-[100%] object-cover rounded-xl"/>
                                </div>
                            </aside>

                            {/* Details */}
                           <section className="flex gap-6">
                           <aside className="w-[50%]">
                                <div>
                                    <p className="bg-orange-500 w-[fit-content] rounded-xl mt-4 py-1 px-2 font-bold">{newData.catagories}</p>
                                    <h1 className="font-light text-4xl my-7">{newData.type}</h1>
                                    <p className="font-bold mb-4 text-2xl">{newData.region}</p>
                                </div>
                                <div>
                                    <p className="font-light">{newData.history}</p>
                                </div>

                                <div className="mt-4">
                                    <span>{`Learn more from`}</span>
                                    <Link to={newData.britannicaLink} target="_blank" className="text-orange-500 py-2 px-2 rounded-md inline mt-4 hover:underline hover:text-black">britannica</Link>
                                </div>
                            </aside>

                            {/* Image Cover */}
                            <aside className="w-[50%]">
                                <div>
                                    <img src={newData.imgCover} alt="" className="rounded-3xl mt-10"/>
                                </div>
                            </aside>
                            </section>

                        </>
                    )
                }
            </section>
        </main>
    </>
  )
}

The code above is doing the following:

• useParams: we use the useParams() hook to return the key and value pairs of the dynamic segment content/:contentId specified on the route.
• newData: using the find() array method, the first element of the object array is returned if the condition is true, otherwise it returns undefined.
• if(!contentId): here, we are checking to see if the contentId doesn’t match or is not rendered yet – then the provided element within the function should run. This is very useful for checking errors and in situations where the content is not available.
• newData &&: here we are mapping through the return data object and rendering the content of the API as soon as the content is loaded. Each object property is parsed into an element to render as content.

Next, go to the home component and render the content component as indicated below.

├──home.jsx

        import { Outlet } from "react-router-dom";
        import AsideBar from "../components/AsideBar";
👉 import Content from "../components/Content";

export default function Home() {
return (
    <>
        <main className="w-[80%] mt-[2em] mx-auto">
            <section>
                <Outlet />
            </section>

            <section className="flex">
                <aside>
                    <AsideBar />
                </aside>

                <aside>
              👉 <Content />
                </aside>
            </section>
        </main>
    </>
)
}

Next, configure the route to a dynamic segment:

├──home.jsx

     import Home from './pages/home';
     import Navbar from './components/navbar';
👉 import Content from './components/Content';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route  path='/' element={<Home />}>
       <Route path='/' element={<Navbar />}> 
       👉 <Route path='content/:contentId' element={<Content />} />
      </Route>
    </Route>
  )
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Your app should look just like this on your browser:

Clicking on the Asidebar will load the content from the API and render it on the same page as the Asidebar.

Summary

In this tutorial, we learned about Dynamic Segments in React Router. We talked about what Dynamic Router is and how it’s different from static routing. You also learned how to use the useParams hook to enable Dynamic Segments, as well as how to set your path when getting data from an API

Then we built a new project that dynamically rendered new content to the same page when the user clicks on the sidebar.

You can take this project further and make it your own by implementing more features.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about React Router 6.

In this course, you will build an Airbnb-style web app called "VanLife," dedicated to renting out travel vans for your next big road trip. Along the way, you will learn all the important parts of React Router 6, such as layout and index routes, nested routes, filtering results with search parameters, protecting routes for authenticated users, and more.

Bob Ziroll, Scrimba's Head of Education, created this course. It is intended to have heavy amounts of participation from you, the student.

Before taking this course, you should already be well versed in HTML, CSS, JavaScript, and React. But if you're ready to take your React Router skills to the next level, this course is for you.

The course is broken down into multiple sections, including an introduction to React Router 6, multi-page vs. single-page apps, setting up React Router with BrowserRouter, creating routes and paths, and building out the VanLife app. You'll also learn about the new Remix-inspired data router APIs, including Loaders and Actions.

The course is structured so that you can follow along with each lesson and build out the VanLife app in real-time. You'll also have the opportunity to participate in challenges that test your understanding of the material.

By the end of this course, you will have built a real-world app using React Router 6, and you'll be ready to tackle even more complex projects in the future.

So what are you waiting for? Watch the full course on the freeCodeCamp.org YouTube channel (10-hour watch).

In this article, you will learn how to deploy a React application that uses react-router without any problems.

The Problem with Deploying react-router Apps

To make sure your users are happy, you'll typically prioritize user experience when building an application. Good user experience ensures that your website or application is easy to understand, easy to use, and easy to navigate.

If you have published a React app to Netlify that uses React router before now, you will likely notice that while navigating through your routes, you get an error (page not found) when you refresh your browser. This creates a bad user experience.

Through this article, you will learn how to deploy a React app through the Netlify CLI and how to resolve the problem with deploying a react-router app.

What is Netlify?

According to their docs, "Netlify is an all-in-one platform for automating modern web projects."

Netlify helps web developers build and deploy their applications instantly. This handy tool replaces your hosting infrastructure and helps facilitate your continuous integration and deployment pipeline with one workflow. It can really help increase your productivity.

The Netlify CLI (Command Line Interface) helps you easily build, test, and deploy applications straight from your command line.

It lets you:

1. start a project in seconds
2. configure continuous deployment
3. run a local development server that you can share with other developers
4. deploy your projects globally

You can sign up for a Netlify account with your email or your Git account.
If you don't have a Git account, you can create a GitHub, GitLab, or bitbucket account in no time.

So, let’s see how you can deploy your react-router app using the Netlify CLI.

How to Deploy Your App Through the Netlify CLI

To start using Netlify’s CLI, you must have Node.js installed on your computer. You can visit here to install Node.js.

Then you can get started by installing the Netlify CLI using this command:

npm install netlify-cli -g

Now that you have installed Netlify’s CLI, you can deploy your application to Netlify. Before that, you might want to get your build folder (I'll explain why below).

To get your build folder, type the following command:

yarn run build
//or
npm run build

If you have not logged in to your Netlify account before now, you might see a pop-up window asking for permission to access Netlify.

After getting access to the Netlify CLI, you will get a prompt asking what you would like to do. Select the option to create and configure a new site. You can use your arrow keys to navigate between options.

You will get prompts to select a team and a site name for your app. You can either input your preferred name for your app or use the default name which you can change later.

You will get a prompt asking which directory to publish. Input build as your deploy folder and press enter to get your React app deployed. The build folder which was generated at the beginning 0f this tutorial will serve as the deploy path.

If you get a final response that states “If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag”, you are on the right track. You will be provided with the website draft URL to preview your app.

You can deploy to the main site by running the following command:

netlify deploy --prod

Awesome. You now have your website URL.

How to Fix the "Page Not Found" Error

page not found, netlify error

To avoid the page-not-found error whenever you are either trying to access your app or you're on other routes, you have to set up a redirect and rewrite rules for your react-router application.

The redirect rule will help your application avoid a 404 error. All requests will get redirected to the /index.html instead of giving a 404 error.

To configure your redirect rules, you have to create a file that does not have an extension named (_redirects) inside your public folder.

Include the following command in the _redirects file:

/*    /index.html  200

To view the changes in your app, you'll have to deploy it again with the following command:

netlify deploy

Conclusion

This article has explained how to deploy a react-router app using Netlify’s CLI and fix the page-not-found error while accessing your routes.

I hope you have found this article useful.

Keep building, and keep deploying!

Implementing a smooth page scroll while using react-router-dom has been a problem in React.js. So this article, you are going to learn how to implement smooth vertical scrolling using the react-router-hash-link package.

What is react-router-hash-link?

According to its docs, react-router-hash-link is a solution to React Router's issue of not scrolling to #hash-fragments when using link components to navigate.

Prerequisites.

You must use BrowserRouter from react-router-dom for react-router-hash-link smooth scrolling to work. To install and use react-router, enter the following command:

npm i react-router-dom

Or for yarn:

yarn add react-router-dom

To understand how to implement vertical scrolling, you will be building a simple landing page with a navbar and three sections.

How to Use react-router-hash-link

Step 1: Install react-router-hash-link

To install the react-router-hash-link package, run the following command:

npm install --save react-router-hash-link

Or with yarn:

yarn add react-router-hash-link

Step 2: Import the react-router-hash-link package into your React app.

Open your LandingPage.js file and import hashlink from your react-router-hash-link package.

import React from 'react';
import { HashLink } from 'react-router-hash-link';

const LandingPage = () => {
    return (
        <>
            <nav>
            . . .
            </nav>

            <section>
            . . .
            </section>
        </>
    )
}

export default LandingPage

Step 3: Add the Hashlink component to point to different areas of your app

Add the Hashlink component to your LandingPage.js file like this:

import React from 'react';
import { HashLink } from 'react-router-hash-link';

const LandingPage = () => {
    return (
    <>
        <nav>
            <HashLink smooth to="/#home">
                About
            </HashLink>

            <HashLink smooth to="/#services">
                Profile
            </HashLink>

            <HashLink smooth to="/#testimonial">
                Services
            </HashLink>
        </nav>

        <section>
        . . .
        </section>
    </>
    )
}
export default LandingPage

Step 4: Add the ID of your Hashlink to any element.

When you click on the link with your id, a scroll effect will be implemented. You will see a scroll to the element or the page that has an id that matches the #hashfragment in the link.

import React from 'react';
import { HashLink } from 'react-router-hash-link';

const LandingPage = () => {

    return (
    <>
        <nav>
            <HashLink smooth to="/#home">
                About
            </HashLink>

            <HashLink smooth to="/#services">
                Profile
            </HashLink>

            <HashLink smooth to="/#testimonial">
                Services
            </HashLink>
        </nav>

        <section id=”about”>
            <h1> About</h1>

            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Vero, nam! Iure officia aut esse tempore accusantium
                explicabo? Corporis deleniti ipsa fuga quas aut neque
                dicta nostrum laboriosam, iusto ullam minima est porro,
                totam saepe. Facilis aliquid praesentium, voluptates rem
                quibusdam sequi numquam illo eius adipisci eaque,
                necessitatibus consectetur, labore vero et ipsum.
                Officiis, ea vero. Praesentium, et. Enim, nostrum illo.
            </p>        
        </section>

        <section id=”profile”>
            <h1> Profile </h1>
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Vero, nam! Iure officia aut esse tempore accusantium
                explicabo? Corporis deleniti ipsa fuga quas aut neque
                dicta nostrum laboriosam, iusto ullam minima est porro,
                totam saepe. Facilis aliquid praesentium, voluptates rem
                quibusdam sequi numquam illo eius adipisci eaque,
                necessitatibus consectetur, labore vero et ipsum.
                Officiis, ea vero. Praesentium, et. Enim, nostrum illo.
            </p>
        </section>

        <section id=”services”>
            <h1> Services </h1>
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Vero, nam! Iure officia aut esse tempore accusantium
                explicabo? Corporis deleniti ipsa fuga quas aut neque
                dicta nostrum laboriosam, iusto ullam minima est porro,
                totam saepe. Facilis aliquid praesentium, voluptates rem
                quibusdam sequi numquam illo eius adipisci eaque,
                necessitatibus consectetur, labore vero et ipsum.
                Officiis, ea vero. Praesentium, et. Enim, nostrum illo.
            </p>
        </section>
    </>
    )
}

export default LandingPage

And there you have it! You've now implemented smooth scrolling on a simple webpage.

Conclusion

React-router-hash-link allows you to leverage smooth scrolling seamlessly while using react-router-dom for routing.

It has a lot of functions including Scroll to top and Scroll with offset functions, so you can explore what else it can do.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use React Router version 6.

John Smilga has created many extremely popular courses and now he will teach you React Router.

React Router v6 is a complete rewrite of the previous versions. The biggest difference is that v6 is a static router and does not keep track of any state internally. This means that v6 is much simpler and easier to use than previous versions.

Another difference is that v6 uses a new URL parsing algorithm that is more compliant with the RFC standard. This means that v6 is more likely to work with other software that also uses RFC compliant URL parsing.

Here are the sections in this course:

• First Pages
• Page Components
• Link Component
• Error Page
• Navbar
• Nested Routes
• Shared Layout
• Index Pages
• NavLink Component
• URL Params
• Single Product
• useNavigate()
• Protected Route
• Refactor

Watch the full course below or on the freeCodeCamp.org YouTube channel (1.5 hour watch).

Prerequisites

• A React app
• A good understanding of what components are in React.
• Node.js installed.

Here's an interactive scrim about how to set up React Router and route to other components:

React as a Single Page Application (SPA)

You need to understand how pages are rendered in a React app before diving into routing. This section is aimed at beginners – you can to skip it if you already understand what a SPA is and how it relates to React.

In non-single page applications, when you click on a link in the browser, a request is sent to the server before the HTML page gets rendered.

In React, the page contents are created from our components. So what React Router does is intercept the request being sent to the server and then injects the contents dynamically from the components we have created.

This is the general idea behind SPAs which allows content to be rendered faster without the page being refreshed.

When you create a new project, you'll always see an index.html file in the public folder. All the code you write in your App component which acts as the root component gets rendered to this HTML file. This means that there is only one HTML file where your code will be rendered to.

What happens when you have a different component you would prefer to render as a different page? Do you create a new HTML file? The answer is no. React Router – like the name implies – helps you route to/navigate to and render your new component in the index.html file.

So as a single page application, when you navigate to a new component using React Router, the index.html will be rewritten with the component's logic.

How to Install React Router

To install React Router, all you have to do is run npm install react-router-dom@6 in your project terminal and then wait for the installation to complete.

If you are using yarn then use this command: yarn add react-router-dom@6.

How to Set Up React Router

The first thing to do after installation is complete is to make React Router available anywhere in your app.

To do this, open the index.js file in the src folder and import BrowserRouter from react-router-dom and then wrap the root component (the App component) in it.

This is what the index.js looked like initially:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

After making changes with React Router, this is what you should have:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

All we did was replace React.StrictMode with BrowserRouter which was imported from react-router-dom. Now the router features are accessible from any part of your app.

How to Route to Other Components

We are finally done setting things up, so now we'll look at routing to and rendering different components.

Step 1 - Create multiple components

We'll create the following Home, About, and Contact components like this:

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  );
}

export default Home;

import React from 'react'

function About() {
    return (
        <div>
            <h1>This is the about page</h1>
        </div>
    )
}

export default About

import React from 'react'

function Contact() {
    return (
        <div>
            <h1>This is the contact page</h1>
        </div>
    )
}

export default Contact

Step 2 - Define routes

Since the App component acts as the root component where our React code gets rendered from initially, we will be creating all our routes in it.

Don't worry if this does not make much sense – you'll understand better after looking at the example below.

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="about" element={ <About/> } />
        <Route path="contact" element={ <Contact/> } />
      </Routes>
    </div>
  )
}

export default App

We first imported the features we'll be using – Routes and Route. After that, we imported all the components we needed to attach a route to. Now let's break down the process.

Routes acts as a container/parent for all the individual routes that will be created in our app.

Route is used to create a single route. It takes in two attributes:

• path, which specifies the URL path of the desired component. You can call this pathname whatever you want. Above, you'll notice that the first pathname is a backslash (/). Any component whose pathname is a backslash will get rendered first whenever the app loads for the first time. This implies that the Home component will be the first component to get rendered.
• element, which specifies the component the route should render.

All we have done now is define our routes and their paths, and attach them to their respective components.

If you are coming from version 5 then you'll notice that we're not using exact and switch, which is awesome.

Step 3 - Use Link to navigate to routes

If you have been coding along up to this point without any errors, your browser should be rendering the Home component.

We will now use a different React Router feature to navigate to other pages based on those routes and pathnames we created in the App component. That is:

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to="about">Click to view our about page</Link>
      <Link to="contact">Click to view our contact page</Link>
    </div>
  );
}

export default Home;

The Link component is similar to the anchor element () in HTML. Its to attribute specifies which path the link takes you to.

Recall that we created the pathnames listed in the App component so when you click on the link, it will look through your routes and render the component with the corresponding pathname.

Always remember to import Link from react-router-dom before using it.

Conclusion

At this point, we have seen how to install, set up and use the basic features of React Router to navigate to different pages in your app. This pretty much covers the basics for getting started, but there are a lot more cooler features.

For example, you can use useNavigate to push users to various pages, and you can use useLocation to get the current URL. Alright, we won't start another tutorial at the end of the article.

You can check out more features in the React Router documentation.

You can find me on Twitter @ihechikara2. Subscribe to my newsletter for free learning resources.

Happy coding!

The thing I love about Netlify is that it provides a lot of useful features
for free such as:

• A way to deploy a static website within seconds
• Continuous deployment, which means when you connect your Github/Gitlab/Bitbucket repository, it automatically triggers deployment when new commits are pushed to the repository
• Assurance that your website never goes down, even during new deployments
• Allows you to easily rollback to any previous working version of your site with a single click
• Lets you quickly preview any of the previously deployed versions of the app
• Change the domain or subdomain of your site instantly

and much more.

So let's see how to deploy a React app to Netlify.

Want to learn Redux from the absolute beginning and build a food ordering app from scratch? Check out the Mastering Redux course.

Drag and Drop the Build Folder in Netlify

The fastest and easy way to deploy a React application is just to drag and drop the build folder in Netlify.

To create a build folder, just execute the npm run build or yarn build command from the command line from your project folder.

Once the build folder is created, you just need to drop the folder in the drop area under the sites menu, as shown below:

How to Deploy an App to Netlify from a GitHub Repository

This is my favorite way of deploying applications on Netlify.

Because whenever you push any changes to the GitHub repository, it will automatically be deployed to Netlify. You can also see all deployed versions and easily roll back to any previously working version of code with just a single click.

If you already have a repository pushed to GitHub, then you just need to connect it.

Login to your Netlify account. In the dashboard, click on the New site from Git button.

Click on the GitHub button to connect your GitHub repository.

It will open a new tab. Make sure the popup is enabled in your browser.

Search for the GitHub repository in the Search repos search box. If your repository is not getting displayed then click on the Configure the Netlify app on GitHub button at the bottom of the page.

Once clicked, scroll down on the page and click on the Select repositories dropdown and search for your repository and click on the Save button.

You will be redirected to the previous page showing all the available repositories.

Search for the repository you want to deploy. For this article, I have selected the react-book-management-app repository which we created in my previous article.

Once you select the repository, you will see the following screen:

For this application, we don't need to change anything.

Your Build command and Publish directory will be automatically populated. Make sure to enter these fields if you have a different command in package.json to build your app or those fields are not auto-populated.

Now, click on the Deploy site button. Once clicked, you will see the Site deploy in progress message.

You'll have to wait a little bit while it's deploying. Once deployment is completed, you will see the following screen:

Open the link in the new tab and you will see your application deployed live.

Awesome! Now, if you make any changes in the source code and push that change to GitHub, Netlify will detect that change and re-deploy your application with your latest changes.

If you check the application, you will see that the application works just fine with the navigation and you're able to add/edit/delete a book.

But there is one issue. If you directly access the /add route or refresh the /add route page, you will get a page not found error as shown below:

You will get the same error if you try to refresh the edit page route.

This is because when we access any route on our local machine, React Router handles the routing. But when we deploy the application on any server, directly accessing the route will send the request to the server itself (Netlify in our case).

But as there is no /add route handler on the server-side, you will see a page not found error. But Netlify provides a way to fix this.

Create a new file with the name _redirects inside the public folder of our project and add the following contents inside it:

/* /index.html 200

Here, we're telling Netlify to redirect all the routes to the index.html file.

The index.html file contains our entire React app code. It gets generated inside the build folder when the yarn build command is executed by Netlify while deploying the app.

And as routing is handled by our React app which is contained in the index.html file, our application will work without a page not found issue.

Now, push the changes to the GitHub repository so Netlify will deploy the app again with these changes.

And once deployed, if you check the deployed application, you will see that the application works fine and we don't get a page not found error.

That's it! We're all done with deploying our application to Netlify.

How to Easily Change a Site Name in Netlify

If you check the name of the deployed site you will see that it's not easy to remember, especially if you have lot of applications deployed. But Netlify provides a way to easily change that.

Click on the Site settings button displayed on the Site overview section.

Then click on the Change site name button and enter a new name. Click on the Save button, and now you can access your application with the changed name.

I usually like to give the same name as the repository name so it's easy to find a particular application if you have a lot of deployed applications on Netlify.

If you want to know how to deploy React + Node.js application to production, check out this article.

Thanks for reading!

You can find the complete GitHub source code along with this redirection change in this repository.

You can see the live demo of the deployed application here.

Want to learn all ES6+ features in detail including let and const, promises, various promise methods, array and object destructuring, arrow functions, async/await, import and export and a whole lot more from scratch?

Check out my Mastering Modern JavaScript book. This book covers all the pre-requisites for learning React and helps you to become better at JavaScript and React.

Check out free preview contents of the book here.

Also, you can check out my free Introduction to React Router course to learn React Router from scratch.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

That's why today we're going to go over the most popular and most powerful router for React applications – React Router.

We're going to go over 11 of the essential features you need to know if you're using React Router in your projects today, specifically for the web using the package react-router-dom.

Want Your Own Copy?‬ 📄

Click here to download the cheatsheet in PDF format (it takes 5 seconds).

It includes all of the essential information here as a convenient PDF guide.

Install React Router

The very first step to using React Router is to install the appropriate package.

They are technically three different packages: React Router, React Router DOM, and React Router Native.

The primary difference between them lies in their usage. React Router DOM is for web applications and React Router Native is for mobile applications made with React Native.

The first thing that you'll need to do is install React Router DOM using npm (or yarn):

npm install react-router-dom

Basic React Router Setup

Once it's installed, we can bring in our first component which is required to use React router which is called BrowserRouter.

Note that there are multiple types of routers that react-router-dom provides aside from BrowserRouter which we won't go into. It's a common practice to alias (rename) BrowserRoute as simply 'Router' when it is imported.

If we want to provide routes within our entire application it needs to be wrapped around our entire component tree. That's why you will usually see it wrapped around or within the main app component:

import { BrowserRouter as Router } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      {/* routes go here, as children */}
    </Router>
  );
}

This is the primary function of the BrowserRouter: to be able to declare individual routes within our application.

Note that any router-specific data cannot be accessed outside of the Router component. For example, we cannot access history data outside of the router (that is, with the useHistory hook) and we cannot create a Route outside of a Router component.

Route Component

The next component is the Route component.

We declare routes within the Router component as children. We can declare as many routes as we like and we need to provide at least two props to each route, path and component (or render):

import { BrowserRouter as Router, Route } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Route path="/about" component={About} />
    </Router>
  );
}

function About() {
  return <>about</>   
}

The path prop specifies on what path of our app a given route is located.

For an about page, for example, we might want that route to be accessible on the path '/about'.

The render or component props are used to display a specific component for our path.

The component props can only receive a reference to a given component, whereas render is more typically used for applying some conditional logic to render one component or another. For render you can either use a reference to a component, or use a function:

import { BrowserRouter as Router, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Route path="/" render={() => <Home />} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function About() {
  return <>about</>;
}

It's worth noting that you can potentially drop the render or component prop entirely and use the component that you want to associate with a given route as a child of Route:

import { BrowserRouter as Router, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Route path="/about">
        <About />
      </Route>
    </Router>
  );
}

Finally, if want a component (such as a navbar) to be visible on every page, put it still within the browser router, but above (or below) the declared routes:

import { BrowserRouter as Router, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Navbar />
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Navbar() {
  // visible on every page
  return <>navbar</>
}

function Home() {
  return <>home</>;
}

function About() {
  return <>about</>;
}

Switch Component

When we begin to add multiple routes, we'll notice something strange.

Let's say we have a route for the home page and about page. Even though we specify two different paths, '/' and '/about', when I visit the about page we'll see both the home and the about components.

We can fix this with the exact prop, on the home route to make sure that our router matches exactly the path '/' instead of '/about':

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

When it comes to switching between different routes that our router should show, there is in fact a dedicated component that you should be using if you have multiple routes within your router and that is the Switch component.

The switch component should be included within the router and we can place all of our routes within it:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

The switch component looks through all of its child routes and it displays the first one whose path matches the current URL.

This component is what we want to use in most cases for most applications, because we have multiple routes and multiple plate pages in our app but we only want to show one page at a time.

If for some reason you do want multiple pages to be displayed at the same time, you might consider not using the switch component.

404 Route

If we attempt to go to a path that doesn't exist in our application, what are we going to see?

We're not going to see anything if we don't have a route corresponding to that. How do we make a catch-all route?

If a user attempts to go to a page for which we don't have a defined route, we can create a route and then set the path to an asterisk *:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}

function NotFound() {
  return <>You have landed on a page that doesn't exist</>;
}

This will match any attempt to visit a page that doesn't exist and we can connect it to a not found component to tell our users that they have "landed on a page that doesn't exist."

Link Component

Let's say that within our NavBar, we actually want to create some links so we can move around our application more easily instead of having to change the URL manually in the browser.

We can do so with another special component from React Router DOM called the Link component. It accepts the to prop, which specifies where we want the link to navigate our user to. In our case, we might have a home and about link:

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  )
}

The link component allows us to provide some inline styles just like any standard React component. It also gives us a helpful component prop, so we can set our link as our own custom component for even easier styling.

NavLink Component

Additionally, React Router DOM gives us a NavLink component which is helpful in the event that we want to apply some special styles.

If we are on the current path that the link points to, this allows us to create some active link styles to tell our users, by looking at our link, what page they're on.

For example, if our users are on the homepage, we could tell them as much by using the activeStyle prop to make our link bold and red when they're on the homepage:

import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

function Navbar() {
  return (
    <nav>
      <NavLink
        activeStyle={{
          fontWeight: "bold",
          color: "red"
        }}
        to="/"
      >
        Home
      </NavLink>
      <NavLink activeClassName="active" to="/about">
        About
      </NavLink>
    </nav>
  );
}

There is also an activeClassName prop which can be set as well if you do not want to include inline styles or want more reusable styles to perform the same function as activeStyle.

Redirect Component

Another very helpful component that React Router DOM gives us is the redirect component.

This may seem strange to have a component that performs a function of redirecting our user when it's displayed, but this is very functional.

Whenever we're using something like a private route and we have a condition in which the user is not authenticated, we want to redirect them back to the login page.

Here is an example of an implementation of a private route component that ensures that a user is authenticated before it shows them a particular route that has been declared with this component.

Otherwise, if they're not authenticated, they will be redirected to a public route (presumably a route to login) once the redirect component is displayed:

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <PrivateRoute path="/hidden" component={Hidden} />
      </Switch>
    </Router>
  );
}

function PrivateRoute({ component: Component, ...rest }) {
  // useAuth is some custom hook to get the current user's auth state
  const isAuth = useAuth();

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuth ? <Component {...props} /> : <Redirect to="/" />
      }
    />
  );
}

function Home() {
  return <>home</>;
}

function Hidden() {
  return <>hidden</>;
}

The redirect component is very simple to use, very declarative, and allows us to see the great benefit of React Router DOM being component-based, just like everything in React.

useHistory Hook

On top of all of these powerful components, there are some very useful hooks that React Router DOM gives us.

They are mainly helpful by supplying additional information that we can use within our components. They can be called as normal React hooks for which we can use their values exactly as we like.

Perhaps the most powerful hook is the useHistory hook. We can call it up at the top of any component that is declared within our router component and get back history data, which includes information such as the location associated with our component.

This tells us all about where the user currently is, such as the pathname that they're on, as well as any query parameters that might be appended to our URL. All of the location data is accessible from history.location:

import { useHistory } from "react-router-dom";


function About() {
  const history = useHistory();

  console.log(history.location.pathname); // '/about'

  return (
    <>
     <h1>The about page is on: {history.location.pathname}</h1>
    </>
  );
}

Additionally, the history object directly includes helpful methods that allows us to programmatically direct our user to different pages in our app.

This is very helpful, for example, for redirecting our user after logging in, or in any situation where we need to take a user from one page to another.

We can push users from one page to another using history.push. When we use the push method, we just need to supply the path that we want to take our users to using this method. It adds this new page on to the stack (so to speak) of our history:

import { useHistory } from "react-router-dom";


function About() {
  const history = useHistory();

  console.log(history.location.pathname); // '/about'

  return (
    <>
     <h1>The about page is on: {history.location.pathname}</h1>
     <button onClick={() => history.push('/')}>Go to home page</button>
    </>
  );
}

We can also redirect our users with history.replace, which also accepts a path value, but clears out everything in history, after the navigation is performed. This is helpful for situations where going back in history is no longer needed, such as after users have been logged out.

useLocation Hook

The useLocation hook includes all of the same information that the useHistory hook does.

It is important to note that if you need both location data and to use history to programmatically navigate your user, make sure to useHistory. However, if you only want location data, all you need to do is call useLocation or get back all of the location data on an object that is identical to the data provided on history. location:

import { useLocation } from "react-router-dom";


function About() {
  const location = useLocation();

  console.log(location.pathname); // '/about'

  return (
    <>
     <h1>The about page is on: {location.pathname}</h1>
    </>
  );
}

useParams Hook + Dynamic Routes

One thing that we didn't cover when it comes to routes is that we can naturally create dynamic routes. This means routes that are not fixed and determined, but can be any number of characters.

Dynamic routes are helpful in situations where we have, let's say, a blog post with a unique slug. How do we make sure that we display the appropriate data and appropriate components, given that our blog post slug can be completely different?

To declare a route parameter on a given route, it must be prefixed with a colon :. If I wanted to create a dynamic route, "/blog/:postSlug", for a blog post component, it might look like the following:

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/blog/:postSlug" component={BlogPost} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function BlogPost() {
  return <>blog post</>;
}

We're now matching the appropriate component or whatever the slug is. But within our BlogPost component, how do we receive that post slug data?

We can access any route params of a declared route with its associated component using the useParams hook.

useParams will return an object which will contain properties that match our route params (in this case, postSlug). We can use object destructuring to immediately access and declare as a variable with the name postSlug:

import React from "react";
import { BrowserRouter as Router, Switch, Route, useParams } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/blog/:postSlug" component={BlogPost} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function BlogPost() {
  const [post, setPost] = React.useState(null);
  const { postSlug } = useParams();

  React.useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${postSlug}`)
      .then((res) => res.json())
      .then((data) => setPost(data));
  }, [postSlug]);

  if (!post) return null;

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.description}</p>
    </>
  );
}

If we go to the route '/blog/my-blog-post', I can access the string 'my-blog-post' on the postSlug variable and fetch that post's associated data within useEffect.

useRouteMatch Hook

If we want to know whether the given component is on a certain page, we can use the useRouteMatch hook.

For example, within our blog post, to see if the page that we're on matches the route "/blog/:postSlug", we can get back a boolean value that will tell us if the route that we're on matches the pattern that we specified:

import { useRouteMatch } from "react-router-dom";

function BlogPost() {
  const isBlogPostRoute = useRouteMatch("/blog/:postSlug");

  // display, hide content, or do something else
}

This is helpful in conditions in which we want to show something specific, based off of whether we're on a certain route or not.

Want to keep this guide for future reference?‬

Click here to download the cheatsheet as a helpful PDF.

Here are 3 quick wins you get when you grab the downloadable version:

• You’ll get tons of copyable code snippets for easy reuse in your own projects.
• It is a great reference guide to strengthen your skills as a React developer and for job interviews.
• You can take, use, print, read, and re-read this guide literally anywhere that you like.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

A project that just uses JavaScript, HTML and CSS is simple to host on GitHub Pages. Projects that are built in React, Vue or Angular require some configurations, though. This gives anyone who visits your application online the same experience you have when you build the application locally.

In this article, I'll show you how to create a simple React application that uses routing and then we'll learn how to upload it to GitHub Pages. We will give special attention to the routing part since it is important to understand and implement.

⚠️ This article assumes you have some knowledge of React and Git.

Prerequisites

You need to have Node, yarn and npm installed on your machine. To check if they are installed, open up a terminal window and type the following:

npm -v
yarn -v
node -v

If these commands print out a version number in the terminal, you are good to go. If not, you need to go ahead and install what is missing.

• Node (contains npm)
• Yarn

We will also need to create a repository on GitHub. Head over to your account and create a new repository. Choose whichever name you deem fit for this project, but I will go with starter-project for the rest of this article.

To create our project, we will be using create-react-app. It is a package that lets you create a single page application with ease. To create a project, you need to type the following in the terminal:

npx create-react-app starter-project

Once the operation finishes, you will have a boilerplate React project, ready to go. To see if it works properly, head into the directory of the project (in our example it would be starter-project) and run the command:

yarn start

If everything runs properly, you will see a message in the terminal that says that your application is running on a local server at this address: http://localhost:3000

If you head over there in your browser, you will see this:

How to Deploy Your Project to GitHub

You may have noticed that we have not created any repository in GitHub. So before we move on, we must have our project uploaded there. Head over to your GitHub account and create a repository with the same name as the React project.

☝️ Make sure to mark your repository as public. If you mark it as private, you won't be able to use GitHub Pages.

We are going to add this repository as a remote to our project. To do that, in the terminal, type:

git remote add <name-of-remote> <url-of-repository>

So, in our case, the command looks like this:

git remote add origin https://github.com/TomerPacific/starter-project

It's important to call the remote origin as it will be used in our deploy process.

After executing the command above, we can't push our code yet. First, we need to configure an upstream branch and set the remote as origin.

 git push --set-upstream origin master

Now, we can push all our project's files to our repository.

In order for us to be able to upload our built application to GitHub Pages, we first need to install the gh-pages package.

yarn add gh-pages

This package will help us to deploy our code to the gh-pages branch which will be used to host our application on GitHub Pages.

To allow us to use the gh-pages package properly, we need to add two keys to our scripts value in the package.json file:

"scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build", <----------- #1
    "deploy": "gh-pages -d build", <---------- #2
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Next, we need to modify our package.json file by adding the homepage field. This field is used by React to figure out the root URL in the built HTML file. In it, we will put the URL of our GitHub repository.

{
  "name": "starter-project",
  "homepage": "https://tomerpacific.github.io/starter-project/", <----
  "version": "0.1.0",
  /....
}

To deploy our application, type the following in the terminal:

npm run deploy

Running the command above takes care of building your application and pushing it to a branch called gh-pages, which GitHub uses to link with GitHub Pages.

🚧 If you did not name your remote origin, you will get an error during this phase stating that: Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

You will know that the process was successful if at the end of it you see the word Published. We can now head to our GitHub repository under Settings and scroll down to the GitHub Pages section.

If you see a message similar to the one above, it means your application is now hosted successfully on GitHub Pages.

_Photo by [Unsplash](https://unsplash.com/@noahglynn?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Noah Glynn / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Routing in React

So far - so good:

1. We have a basic React application that is hosted on GitHub Pages
2. We also have a streamlined process to deploy it when we want to make changes

But since the purpose of this article is to show a more complex application than the one we initially created, we will be discussing routing.

One component that is missing from out application is navigation. Our application won't just be one page, it will probably have many pages. So, how will users be able to navigate between them?

Routing is the practice of selecting a path for traffic in a network. Or in more basic terms, what happens when you click on a link inside of a webpage and where you get redirected.

React is a library, and it does not contain everything you need for your application out of the box (in our case, routing). Therefore, we will need to install react router.

React router has different components for web applications and for native ones. Since we are building a web application, we will be using react-router-dom.

yarn add react-router-dom

To make use of routing in our application, let's create a navigation element which will be visible at the top of the application. We will be adding this inside our App.js file and replacing the current HTML markup that is there.

 <div>
     <nav>
         <ul id="navigation">
             <li>
                 <Link to="/">Home</Link>
             </li>
             <li>
                 <Link to="/about">About</Link>
             </li>
             <li>
                 <Link to="/contact">Contact</Link>
             </li>
         </ul>
     </nav>
</div>

Usually, in a non React project, we would put a relative path to our HTML pages for each section. That way, the browser knows where to load the data from.

But in our project, we won't have different HTML pages for each section. We will just load a different component. The markup that used to be inside of App.js will now be found inside of a component called Home.

import './App.css';
import React from 'react';
import logo from './logo.svg';

class Home extends React.Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
                </header>
            </div>

        );
    }

}

export default Home;

As we have created three sections in our navgiation and taken care of the home section, let's give another example with the About section.

We'll create a new file called About.jsx that will hold our template and code for the about section.

import React from 'react';

const divStyle = {
    color:'white'
};

class About extends React.Component {

    render() {
        return (
            <div style={divStyle}>
                <h2>About Page</h2>
                <main>
                    <p>This section contains information about...</p>
                </main>
            </div>
        )
    }
}



export default About;

You may be asking yourself, how will the application know to redirect the user once they click on the about link? For that we will use a component called Route.

The Route is one of the most important components in react-router because it lets you render different component based on the path of the URL. For our project, we will use the code below inside of App.js just below the navigation markup.

<Switch>
    <Route exact path="/">
    <Home />
    </Route>
    <Route path="/about">
    <About />
    </Route>
</Switch>

You can see that we created two routes for home and about. The Switch component lets us group route components together and it will only match one of them.

Our combined App.js file looks like this:

import './App.css';
import React from 'react';
import { Route, Switch, Link } from "react-router-dom";
import About from './About';
import Home from './Home';

class App extends React.Component {
  render() {
      return (
        <div className="App">
          <div>
            <nav>
              <ul id="navigation">
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                <Link to="/about">About</Link>
                </li>
                <li>
                <Link to="/contact">Contact</Link>
                </li>
              </ul>
            </nav>
          </div>
            <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
          </Switch>
          </div>
            );
  }
}

export default App;

One last thing we should do is wrap our entire project in a Router component. We need to do this because it enables us to use routing in our application. We will be using the BrowserRouter component as it uses HTML5's history API.

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

If we run things locally, everything seems to work. Let's deploy our augmented project to GitHub Pages and see what the result is.

How to Handle Routing Using HashRouter

At first glance, everything seems to be working fine. But when you try refreshing the page or navigating through the browser itself, you'll keep getting 404 errors.

Why does this happen? Because GitHub Pages does not support browser history like your browser does. In our case, the route https://tomerpacific.github.io/starter-project/about doesn't help GitHub Pages understand where to point the user (since it is a frontend route).

To overcome this problem, we need to use a Hash Router instead of a Browser Router in our application. This type of router uses the hash portion of the URL to keep the UI in sync with the URL.

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

You can read more about this here.

Deploy your application again and you'll be satisfied with the result. No more 404 errors.

This article was inspired by working on a project of mine. You can view it below:

And you can see the source code here:

As you're piecing together your React learning path, it's easy to feel overwhelmed and say, "It's impossible to learn it all. There are too many things I need to learn!"

To be successful with React, don't attempt to learn everything. Focus on learning the right things.

Let's break down the seven key skills that you need to focus on to build impressive applications and become an in-demand React developer.

Step 1: Become confident with the core fundamentals of HTML, CSS, and JavaScript

The first step in learning React is actually somewhat of a step backwards.

The building blocks of the web and every single webpage are HTML, CSS, and JavaScript. Any good React developer should know how to use them. React builds upon them to help you create apps that run on the web.

If you’ve built something with HTML, CSS and JavaScript already, you’re in a good place. For example, if you’ve built a complete landing page or a small website.

Out of the three technologies, React is most connected with JavaScript. React is JavaScript, with some added features. For that reason, you’ll need to have solid JavaScript skills.

What JavaScript concepts should you know for React?

• Basic data structures: variables, objects, and arrays
• Array methods and working with array data: .map(), .filter(), and .reduce()
• Be very familiar with functions and a little bit with classes
• Asynchronous JavaScript: promises, making HTTP requests with Fetch API, async/await syntax can help
• The DOM: learn to create, select and modify HTML elements as well as their attributes
• Object and array destructuring are helpful for working with data

Many developers claim that you should know "ES6/ES7/ES8/ESNext JavaScript" (in other words, the latest JavaScript features) to better learn React. Knowing more JavaScript can help, but new features can also serve as a distraction for new learners.

First, become confident with the JavaScript concepts I've listed above by building some small projects that require JavaScript. After that, you can take a look at some newer features of the language.

Step 2: Learn React fundamentals and React hooks

Once you’re confident with JavaScript, you’re ready to learn React and its core concepts.

These fundamentals are all React-specific and they exist to help us build applications with React, using patterns that JavaScript itself does not have.

What React fundamentals do you need to know?

• How to structure JSX elements (and how it differs from plain HTML)
• How to render (show) JSX elements and how to show or hide elements based on certain conditions
• How to split JSX into components and how to reuse and organize those components to make our app interface.
• How to pass data (+ JSX elements and components) to components using props and when to do so
• How to store and update data within components using state and how to "lift state up" to other components
• How to use event data in React and handle events from onClick, onChange, and onSubmit events (i.e. events from buttons, inputs, and forms)

As a 7-year old library, React’s features have changed over time. A question I’m often asked is what should you learn first: the old or the new syntax? At the end of 2018, React received a large update that included features called React Hooks.

Hooks were a great improvement. They made React apps simpler, more powerful, and allow us to write less code. What’s important for you to know is the five core React hooks.

What five React Hooks do you need to know most of all?

• useState: to store and manage data within individual components
• useEffect: to perform actions like HTTP requests or working with a browser API
• useRef: to reference JSX elements
• useContext: to access data from React Context to share data among components more easily [rather than passing props]
• useReducer: to store and manage data across multiple components

There are more hooks than these 5, but the others are not needed as often. So yes, you should learn the latest React features. Jump into using hooks right away. They will be the basis of every React app you make.

Step 3: Learn to fetch data from both REST and GraphQL APIs

A React app is the frontend of a complete application. In every application, you will likely have both a React frontend, which the user interacts with as well as a backend that our React code interacts with. The backend is where we get our data from and do other things like authenticate our users.

There are two ways of working with data from a backend. The standard way of getting data is from what’s called a REST API. REST APIs are the most common form of API. And the newer way is from what’s called a GraphQL API.

You’ll encounter both types of API in your work, so become familiar with using React to interact with both.

Step 4: Learn to style your React apps with a component library or utility class library

Every React app needs styling for its appearance. One choice is to use plain CSS. You can write your own styles and put them in a separate style sheet.

But besides CSS, many React developers use what’s known as a component library for easier styling. A component library gives us reusable components that have their own pre-made styles. The most popular component library for React is Material UI. But there are many others you can choose from.

Developers also use tools that provide pre-made class names called utility class libraries. Unlike a component library, a utility class library comes with pre-made classes to style your elements.

You can style your app by applying classnames to each element. This removes the need to write any styles yourself. The most popular utility class library is Tailwind CSS.

You’ll encounter both of these as a developer, so become familiar with both a component library and a utility class library.

Step 5: Manage state in React with React context

What is state management? It’s the process of deciding where to locate data and how to work with it across our app. To manage state across your app’s components, use React Context.

React Context is a tool that’s built into the core React library and allows us to pass data across our app's components without using props. It helps us solve the problem of prop-drilling which involves passing props (data) down to components that are deeply nested into one another.

With React Context, we place a value on the context we create and then access it using the useContext() React hook.

What about Redux? Redux is a popular library for managing state in React apps. It is a far more complex tool than you need for most apps you’ll build. While Redux is still relied upon for very large applications, React Context will be enough for any app you make.

Plus you can get many of the benefits of Redux by combining React Hooks and React Context. This is a great advantage compared to learning an extra library.

Step 6: Learn a React router. In particular, react-router-dom

What is a router? Any website we visit has many pages we can browse by going forward or backward in our browser’s history. To create these different pages or routes in React, we need to use what’s called a router.

React itself does not come with its own router, so we’re going to need to use a third party library, one called react-router-dom.

react-router-dom is necessary for creating pages in our app, as well as navigating the user around each page. It lets us create links to different pages of our app and navigate to them or redirect them to other pages if we need.

What features of react-router-dom do you need to know?

• How to create app routes using the <Route />, <Switch />, and <BrowserRouter /> components
• How to navigate users to different pages using the <Link /> component and programmatically using the useHistory() hook
• How to create dynamic routes using the path prop (i.e. <Route path="/posts/:post-slug" component={Post} />) and get the path's value using the useParams() hook
• How to redirect users from protected content using the <Redirect /> component (see number 7)

Step 7: Learn patterns for authentication in React

Authenticated users are people who have signed in to use our app. And we want to give those users access to different things. For that reason, authentication goes hand in hand with routing. This is because authenticated users should be able to see certain pages that unauthenticated users cannot.

What do you need to know about authentication as a React developer?

There is one main thing. You should learn how to show certain content to authenticated users and hide that content from unauthenticated ones.

In review, these are all the core skills you need to have as a React developer, capable of building complete applications and working as a hired frontend developer.

Beyond these 7 skills, note that there are many that can deepen your understanding as a developer. For example, learning more about browsers, HTTP, and APIs, to name a few. But if you follow all these steps, you’ll have a solid understanding of React and be able to build applications of any scale.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

If you have just started with React, you are probably still wrapping your head around the whole Single Page Application concept.

Traditionally routing works like this: let's say you type in /contact in the URL. The browser will make a GET request to the server, and the server will return an HTML page as the response.

But, with the new Single Page Application paradigm, all the URL requests are served using the client-side code.

Applying this in the context of React, each page will be a React component. React-Router matches the URL and loads up the component for that particular page.

Everything happens so fast, and seamlessly, that the user gets a native app-like experience on the browser. There is no flashy blank page in between route transitions.

In this article, you'll learn how to use React-Router and its components to create a Single Page Application. So open up your favorite text editor, and let's get started.

Setup the project

Create a new React project by running the following command.

yarn create react-app react-router-demo

I'll be using yarn to install the dependencies, but you can use npm as well.

Next, let's install react-router-dom.

yarn add react-router-dom

For styling the components, I'm going to use the Bulma CSS framework. So let's add that as well.

yarn add bulma

Next, import bulma.min.css in the index.js file and clean up all the boilerplate code from the App.js file.

import "bulma/css/bulma.min.css";

Now that you have the project set up let's start by creating a few page components.

Creating the Page Components

Create a pages directory inside the src folder where we will park all the page components.

For this demo, create three pages - Home, About, and Profile.

Paste the following inside the Home and About components.

// pages/Home.js

import React from "react";

const Home = () => (
  <div>
    <h1 className="title is-1">This is the Home Page</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida,
      risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros
      nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum,
      lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio.
    </p>
  </div>
);

export default Home;

// pages/About.js

import React from "react";

const About = () => (
  <div>
    <h1 className="title is-1">This is the About Page</h1>
    <p>
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus
      et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat,
      in efficitur arcu congue. Nam fermentum commodo egestas.
    </p>
  </div>
);

export default About;

We will create the Profile page later on in the article.

Create the Navbar Component

Let's start by creating the navigation bar for our app. This component will make use of the <NavLink /> component from react-router-dom.

Create a directory called "components" inside the src folder.

// components/Navbar.js

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
      <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
          {/* ... */}
      </div>
    </nav>
  );
 };

 export default Navbar;

The isOpen state variable will be used to trigger the menu on mobile or tablet devices.

So let's add the hamburger menu.

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
      <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
      <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
          {/* ... */}
      </div>
    </nav>
  );
 };

To add the link in the menu, use the <NavLink /> component by react-router-dom.

The NavLink component provides a declarative way to navigate around the application. It is similar to the Link component, except it can apply an active style to the link if it is active.

To specify which route to navigate to, use the to prop and pass the path name.
The activeClassName prop will add an active class to the link if it's currently active.

<NavLink
    className="navbar-item"
    activeClassName="is-active"
    to="/"
    exact
>
    Home
</NavLink>

On the browser, the NavLink component is rendered as an <a> tag with an href attribute value that was passed in the to prop.

Also, here you need to specify the exact prop so that it is matched precisely with the URL.

Add all the links and finish up the Navbar component.

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
        <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>

        <div className={`navbar-menu ${isOpen && "is-active"}`}>
          <div className="navbar-start">
            <NavLink className="navbar-item" activeClassName="is-active" to="/">
              Home
            </NavLink>

            <NavLink
              className="navbar-item"
              activeClassName="is-active"
              to="/about"
            >
              About
            </NavLink>

            <NavLink
              className="navbar-item"
              activeClassName="is-active"
              to="/profile"
            >
              Profile
            </NavLink>
          </div>

          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                <a className="button is-white">Log in</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

If you notice here, I've added a Login button. We will come back to the Navbar component again when we discuss protected routes later on in the guide.

Rendering the pages

Now that the Navbar component is set up let's add that to the page and start with rendering the pages.

Since the navigation bar is a common component across all the pages, instead of calling the component in each page component, it will be a better approach to render the Navbar in a common layout.

// App.js

function App() {
  return (
    <>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        {/* Render the page here */}
      </div>
    </>
  );
}

Now, add the page components inside of the container.

// App.js

function App() {
  return (
    <>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Home />
          <About />
      </div>
    </>
  );
}

If you check out the results now, you'll notice that both the Home and the About page component gets rendered onto the page. That's because we haven't added any routing logic yet.

You need to import the BrowserRouter component from React Router to add the ability to route the components. All you need to do is wrap all the page components inside of the BrowserRouter component. This will enable all the page components to have the routing logic. Perfect!

But again, nothing's going to change with the results – you are still going to see both the pages rendered. You need to render the page component only if the URL matches a particular path. That's where the Route component from React Router comes into play.

The Router component has a path prop that accepts the page's path, and the page component should be wrapped with the Router, as shown below.

<Route path="/about">
  <About />
</Route>

So let's do the same for the Home component.

<Route exact path="/">
  <Home />
</Route>

The exact prop above tells the Router component to match the path exactly. If you don't add the exact prop on the / path, it will match with all the routes starting with a / including /about.

If you go check out the results now, you'll still see both the components rendered. But, if you go to /about, you'll notice that only the About component gets rendered. You see this behavior because the router keeps matching the URL with the routes even after it had matched a route already.

We need to tell the router to stop matching further once it matches a route. This is done using the Switch component from React Router.

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

There you go! You have successfully configured routing in your React app.

Protected Routes and Redirect

When working on Real-world applications, you will have some routes behind an authentication system. You are going to have routes or pages that can only be accessed by a logged-in user. In this section, you'll learn how to go about implementing such routes.

Please note that I'm not going to create any login form or have any back-end service authenticate the user. In a real application, you wouldn't implement authentication the way demonstrated here.

Let's create the Profile page component that should only be accessed by the authenticated user.

// pages/Profile.js

import { useParams } from "react-router-dom";

const Profile = () => {
  const { name } = useParams();
  return (
    <div>
      <h1 className="title is-1">This is the Profile Page</h1>
      <article className="message is-dark" style={{ marginTop: 40 }}>
        <div className="message-header">
          <p>{name}</p>
        </div>
        <div className="message-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
          <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
          nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
          purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac{" "}
          <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
          sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
          magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales
          sem.
        </div>
      </article>
    </div>
  );
};

We will grab the user's name from the URL using route parameters.

Add the Profile route into the router.

<Route path="/profile/:name">
  <Profile />
</Route>

Currently the profile page can be accessed directly. So to make it an authenticated route, create a Higher-Order component (HOC) to wrap the authentication logic.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    // ...
  };

  return AuthRoute;
};

To determine if a user is authenticated or not, grab the authentication token that is stored in the browser when the user logs in. If the user is not authenticated, redirect the user to the Home page. The Redirect component from React Router can be used to redirect the user to another path.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    if (isAuth) {
      return <Component />;
    } else {
      return <Redirect to="/" />;
    }
  };

  return AuthRoute;
};

You can also pass in other user information like name and user ID using props to the wrapped component.

Next, use the withAuth HOC in the Profile component.

import withAuth from "../components/withAuth";

const Profile = () => {
 // ...
}

export default withAuth(Profile);

Now, if you try to visit /profile/JohnDoe, you will get redirected to the Home page. That's because the authentication token is not yet set in your browser storage.

Alright, so, let's return to the Navbar component and add the login and logout functionalities. When the user is authenticated, show the Logout button and when the user is not logged in show the Login button.

// components/Navbar.js

const Navbar = () => {
    // ...
    return (
        <nav
          className="navbar is-primary"
          role="navigation"
          aria-label="main navigation"
        >
        <div className="container">
            {/* ... */}
            <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                {!isAuth ? (
                  <button className="button is-white" onClick={loginUser}>
                    Log in
                  </button>
                ) : (
                  <button className="button is-black" onClick={logoutUser}>
                    Log out
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
        </nav>
    );
}

When the user clicks on the login button, set a dummy token in the local storage, and redirect the user to the profile page.

But we cannot use the Redirect component in this case – we need to redirect the user programmatically. Sensitive tokens used for authentication are usually stored in cookies for security reasons.

React Router has a withRouter HOC that injects the history object in the props of the component to leverage the History API. It also passes the updated match and location props to the wrapped component.

// components/Navbar.js

import { NavLink, withRouter } from "react-router-dom";

const Navbar = ({ history }) => { 
  const isAuth = !!localStorage.getItem("token");

  const loginUser = () => {
    localStorage.setItem("token", "some-login-token");
    history.push("/profile/Vijit");
  };

  const logoutUser = () => {
    localStorage.removeItem("token");
    history.push("/");
  };

  return ( 
   {/* ... */}
  );
};

export default withRouter(Navbar);

And voilà! That's it. You have conquered the land of authenticated routes as well.

Check out the live demo here and the complete code in this repo for your reference.

Conclusion

I hope by now you have a fair idea of how client-side routing works in general and how to implement routing in React using the React Router library.

In this guide, you learned about the vital components in React Router like Route, withRouter, Link, and so on, along with some advanced concepts like authenticated routes, that are required to build an application.

Do check out the React Router docs to get a more detailed overview of each of the components.

React is a JavaScript library for building user interfaces. We can also extend it to build multi-page applications with the help of React Router. This is a third-party library that enables routing in our React apps.

In this tutorial, we are going to cover everything you need to know to get started with React Router.

• Setting up the project
• What is routing?
• Setting up the router
• Rendering routes
• Using Links to switch pages
• Passing Route parameters
• Navigating programmatically
• Redirecting to another page
• Redirecting to a 404 page
• Guarding routes
• Router Hooks
• useHistory
• useParams
• useLocation
• Final Thoughts
• Next Steps

Setting up the project

To be able to follow along, you will need to create a new React app by running the following command in your terminal:

npx create-react-app react-router-guide

Then, add these lines of code to the App.js file:

import React from "react";
import "./index.css"

export default function App() {
  return (
    <main>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
        </nav>
     </main>
  );
}
// Home Page
const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
  );
// About Page
const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
  );
// Contact Page
const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
  );

const FakeText = () => (
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  )

Then, if you're ready to go, let's start by answering an important question: what is routing?

What is routing?

Routing is the capacity to show different pages to the user. That means the user can move between different parts of an application by entering a URL or clicking on an element.

As you may already know, by default, React comes without routing. And to enable it in our project, we need to add a library named react-router.

To install it, you will have to run the following command in your terminal:

yarn add react-router-dom

Or

npm install react-router-dom

Now, we've successfully installed our router, let's start using it in the next section.

Setting up the router

To enable routing in our React app, we first need to import BrowserRouter from react-router-dom.

In the App.js file, enter the following:

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router } from "react-router-dom";

export default function App() {
  return (
  <Router>
    <main>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </main>
</Router>
  );
}

This should hold everything in our app where routing is needed. That means, if we need routing in our entire app, we must wrap our higher component with BrowserRouter.

By the way, you don't have to rename BrowserRouter as Router as I do here, I just want to keep things readable.

A router alone doesn't do much. So let's add a route in the next section.

Rendering routes

To render routes, we have to import the Route component from the router package.

In your App.js file, add the following code:

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router, Route } from "react-router-dom";

export default function App() {
  return (
  <Router>
    <main>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
  <Route path="/" render={() => <h1>Welcome!</h1>} />
    </main>
</Router>
  );
}

Then, add it where we want to render the content. The Route component has several properties. But here, we just need path and render.

path: the path of the route. Here, we use / to define the path of the home page.

render: will display the content whenever the route is reached. Here, we'll render a welcome message to the user.

In some cases serving routes like that is perfectly fine. But imagine a case when we have to deal with a real component – using render may not be the right solution.

So, how can we display a real component? Well, the Route component has another property named component.

Let's update our example a bit to see it in action.

In your App.js file, add the following code:

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router, Route } from "react-router-dom";

export default function App() {
  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>

    <Route path="/" component={Home} />
    </main>
</Router>
  );
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
  );

Now, instead of rendering a message, our route will load the Home component.

To get the full power of React Router, we need to have multiple pages and links to play with. We already have pages (components if you want, too), so now let's add some links so we can switch between pages.

Using links to switch pages

To add links to our project, we will use the React Router again.

In your App.js file, add the following code:

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

export default function App() {
  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

    <Route path="/" exact component={Home} />
    <Route path="/about"  component={About} />
    <Route path="/contact"  component={Contact} />

    </main>
</Router>
  );
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
  );

const About = () => (
  <Fragment>
    <h1>About</h1>
    <FakeText />
  </Fragment>
  );

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
  );

After importing Link, we have to update our navigation bar a bit. Now, instead of using a tag and href, React Router uses Link and to to, well, be able to switch between pages without reloading it.

Then, we need to add two new routes, About and Contact, to be able to switch between pages or components.

Now, we can go to different parts of our app through links. But there is an issue with our router: the Home component is always displayed even if we switch to other pages.

This is because React Router will check if the path defined starts with /. If that's the case, it will render the component. And here, our first route starts with /, so the Home component will be rendered each time.

However, we can still change the default behavior by adding the exact property to Route.

In App.js, add:

    <Route path="/" exact component={Home} />

By updating the Home route with exact, now it will be rendered only if it matches the full path.

We can still enhance it by wrapping our routes with Switch to tell to React Router to load only one route at a time.

In App.js, add:

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/about"  component={About} />
    <Route path="/contact"  component={Contact} />
  </Switch>

Now that we have new links, let's use them to pass parameters.

Passing route parameters

To pass data between pages, we have to update our example.

In your App.js file, add the following code:

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

export default function App() {
  const name = 'John Doe'
  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to={`/about/${name}`}>About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about/:name"  component={About} />
      <Route path="/contact"  component={Contact} />
    </Switch>
    </main>
</Router>
  );
}

const Home = () => (
  <Fragment>
    <h1>Home</h1>
    <FakeText />
  </Fragment>
  );

const About = ({match:{params:{name}}}) => (
  // props.match.params.name
  <Fragment>
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
);

const Contact = () => (
  <Fragment>
    <h1>Contact</h1>
    <FakeText />
  </Fragment>
  );

As you can see here, we start by declaring a new constant name which will be passed as a parameter to the About page. And we append name to the corresponding link.

With that, we now have to update the About route by adjusting its path to receive name as a parameter path="/about/:name".

Now, the parameter will be received as props from the About component. The only thing we have to do now is destructure the props and get back the name property. By the way, {match:{params:{name}}} is the same as props.match.params.name.

We've done a lot up to this point. But in some cases we don't want to use links to navigate between pages.

Sometimes, we have to wait for an operation to finish before navigating to the next page.

So, let's handle that case in the next section.

Navigating programmatically

The props we receive have some convenient methods we can use to navigate between pages.

In App.js, add:

const Contact = ({history}) => (
  <Fragment>
    <h1>Contact</h1>
    <button onClick={() => history.push('/') } >Go to home</button>
    <FakeText />
  </Fragment>
  );

Here, we pull the history object from the props we receive. It has some handy methods like goBack, goForward, and so on. But here, we will use the push method to be able to go to the Home page.

Now, let's handle the case when we want to redirect our user after an action.

Redirecting to another page

The React Router has another component named Redirect. As you guessed, it helps us redirect the user to another page

In App.js, add:

import { BrowserRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom";

const About = ({match:{params:{name}}}) => (
  // props.match.params.name
  <Fragment>
    { name !== 'John Doe' ? <Redirect to="/" /> : null }
    <h1>About {name}</h1>
    <FakeText />
  </Fragment>
);

Now, if the name passed as a parameter is not equal to John Doe, the user will be redirected to the home page.

You could argue that you should redirect the user with props.history.push('/). Well, the Redirect component replaces the page and therefore the user can't go back to the previous page. But, with the push method they can. However, you can use props.history.replace('/) to mimic the Redirect behavior.

Now let's move on and handle the case when the user hits a route that doesn't exist.

Redirecting to a 404 page

To redirect the user to a 404 page, you can create a component to show it. But here, to keep things simple, I will just display a message with render.

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

export default function App() {
  const name = 'John Doe'

  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to={`/about/${name}`}>About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about/:name"  component={About} />
      <Route path="/contact"  component={Contact} />
      <Route render={() => <h1>404: page not found</h1>} />

    </Switch>
    </main>
</Router>
  );
}

The new route we've added will catch every path that doesn't exist and redirect the user to the 404 page.

Now, let's move on and learn how to protect our routes in the next section.

Guarding routes

There are many ways to protect routes to React. But here I will just check if the user is authenticated and redirect them to the appropriate page.

import React, { Fragment } from "react";
import "./index.css"

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

export default function App() {
  const name = 'John Doe'
  const isAuthenticated = false
  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to={`/about/${name}`}>About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      {
      isAuthenticated ? 
      <>
      <Route path="/about/:name"  component={About} />
      <Route path="/contact"  component={Contact} />
      </> : <Redirect to="/" />
      }

    </Switch>
    </main>
</Router>
  );
}

As you can see here, I declared a variable to mimic authentication. Then, check if the user is authenticated or not. If they are, render protected pages. Otherwise redirect them to the home page.

We've covered a lot up to this point, but an interesting part remains: router hooks.

Let's move to the final section and introduce Hooks.

Router Hooks

Router hooks make things much easier. Now you can access the history, location, or parameters in an easy and elegant way.

useHistory

The useHistory hook gives us access to the history instance without pulling it from props.

import { useHistory } from "react-router-dom";

const Contact = () => {
const history = useHistory();
return (
  <Fragment>
    <h1>Contact</h1>
    <button onClick={() => history.push('/') } >Go to home</button>
  </Fragment>
  )
  };

useParams

This hook helps us get the parameter passed on the URL without using the props object.

import { BrowserRouter as Router, Route, Link, Switch, useParams } from "react-router-dom";

export default function App() {
  const name = 'John Doe'
  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to={`/about/${name}`}>About</Link></li>
        </ul>
      </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about/:name"  component={About} />
    </Switch>
    </main>
</Router>
  );
}

const About = () => {
  const { name } = useParams()
  return (
  // props.match.params.name
  <Fragment>
    { name !== 'John Doe' ? <Redirect to="/" /> : null }
    <h1>About {name}</h1>
    <Route component={Contact} />
  </Fragment>
)
};

useLocation

This hook returns the location object that represents the current URL.

import { useLocation } from "react-router-dom";

const Contact = () => {
const { pathname } = useLocation();

return (
  <Fragment>
    <h1>Contact</h1>
    <p>Current URL: {pathname}</p>
  </Fragment>
  )
  };

Final Thoughts

React Router is an amazing library that helps us go from a single page to a multi-page application feeling with great usability. (Just keep in mind – at the end of the day, it's still a single page app).

And now with router hooks, you can see how easy and elegant they are. They're definitely something to consider in your next project.

You can read more of my articles on my blog.

Next Steps

React Router Documentation

Photo by Joshua Sortino on Unsplash

Sometimes you've only got 5 minutes to spare. Instead of wasting it on social media, let's get a 5-minute introduction to React-Router! In this tutorial, we're going to learn the basics of routing in React by building navigation for a Scrimba knitting shop website. It's not real, but maybe one day... ;)

If you want a proper introduction to this subject, you can join the waitlist for my upcoming advanced React course, or if you're still a beginner, check out my introductory course on React.

What is React-Router, anyway?

Many modern websites are actually made up of a single page, they just look like multiple pages because they contain components which render like separate pages. These are usually referred to as SPAs - single-page applications. At its core, what React Router does is conditionally render certain components to display depending on the route being used in the URL (/ for the home page, /about for the about page, etc.).

For example, we can use React Router to connect www.knit-with-scrimba.com/ to www.knit-with-scrimba.com/about or www.knit-with-scrimba.com/shop

Sounds great - how do I use it?

To use React Router, you first have to install it using NPM:

npm install react-router-dom

Alternatively, you can just use this playground in Scrimba, which has the completed code already written.

You'll need to import BrowserRouter, Route, and Switch from react-router-dom package:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

In my example, I link the landing page with two other "pages" (which are actually just components) called Shop and About.

First, you'll need to set up your app to work with React Router. Everything that gets rendered will need to go inside the <BrowserRouter> element, so wrap your App in those first. It's the component that does all the logic of displaying various components that you provide it with.

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Next, in your App component, add the Switch element (open and closing tags). These ensure that only one component is rendered at a time. If we don't use this, we can default to the Error component, which we're going to write later.

function App() {
    return (
        <main>
            <Switch>

            </Switch>
        </main>
    )
}

It's now time to add your <Route> tags. These are the links between the components and should be placed inside the <Switch> tags.

To tell the <Route> tags which component to load, simply add a path attribute and the name of the component you want to load with component attribute.

<Route path='/' component={Home} />

Many homepage URLs are the site name followed by "/", for example, www.knit-with-scrimba.com/. In this case, we add exact to the Route tag. This is because the other URLs also contain "/", so if we don't tell the app that it needs to look for just /, it loads the first one to match the route, and we get a pretty tricky bug to deal with.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

Now import the components into the app. You may wish to have them in a separate "components" folder to keep code clean and readable.

import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop';

Onto that error message I mentioned earlier, which loads if a user types an incorrect URL. This is just like a normal <Route> tag, but with no path. The Error component contains <h1>Oops! Page not found!</h1>. Don't forget to import it into the app.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

So far, our site is only navigable by typing the URLs. To add clickable links to the site, we use the Link element from React Router and set up a new Navbar component. Once again, don't forget to import the new component into the app.

Now add a Link for each component in the app and use to="URL" to link them.

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};

Your site now has clickable links that can navigate you around your single-page app!

Conclusion

So there we have it. If you want to easily navigate around a React app, forget the anchor tags and add React Router. It's clean, it's organized, and it makes adding and deleting pages a whole lot easier.

To learn more about React Hooks and other great features of React, you can join the waitlist for my upcoming advanced React course.

Or if you're looking for something more beginner friendly, you can check out my introductory course on React.

Happy coding ;)