React Router

What is React Router

React router is a one of the greatest tool for using react, also one of the intuitive tools for react to use. React Router is a tool to mark your components to endpoints without using your server do that for you. React Router is a sense acts like a server itself, you can pass things down like you could with a request parameter or in a request body in a AJAX request. This can do really nice things to make your webapp do things like building a navigation bar or build components that can be linked through other elements on your page. Another great use is building a 404 page that can catch a user trying to reach your page with a bad endpoint as to not lead them to an bad request page given from the browser. I expect the reader of this blog top understand React basics and I wont get deep into building a react app.

Setting Up Routes

Setting up pretty straight forward, you will need to set up the routes in your root component. For the sake of explaining I will refer to the root component as

but the same applies for

and whatever you might want to call your parent component. You will also need a component to show your navigation bar that I will refer as

.

will hold your routes and render your

, and your

will render the links of your components and the child components that the user has clicked. You will want to also add routes that will also not be in your

but wish to render through another component. You will have to install react router into your

with this command:

    npm install react-router-dom

After installing this package and setting up your

, you can start building out your route.

will look similar to this:

    // Required dependencies
import { BrowserRouter, Routes, Route } from "react-router-dom";
// Component that you want to build routes to
import Nav-bar from "./pages/Nav-bar";
import Home from "./pages/Home";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import 404Page from "./pages/404Page";

const App = () => (
     <BrowserRouter>
    <!--Renders nav bar -->
          <Nav-bar />
          <Routes>
               <!-- This is the route to your main page-->
               <Route path="/" element={<Home />}>
               <Route path="page1" element={<Page1 />} />
               <!--Path with a id will act as a query param-->
               <Route path="page2:id" element={<Page2 />} />
               <!--This is a catch all route-->
               <Route path="*" element={<404Page />} />
          </Routes>
    </BrowserRouter>
)

Next thing to do is setup your navigation or

:

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

const Nav-Bar = () => (
  <>
    <nav>
      <ul>
        <!--Sets up links to components-->
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/pothole">page1</Link>
        </li>
      </ul>
    </nav>
    <!--This render clicked component-->
    <Outlet />
  </>
)

App.jsx

will render the

as an

. As you clicked through the

it will render clicked component.

and

are not on the

for different reasons. The

will render is the user tries to goto a endpoint that does not exist.

has a

in its route path and this can be used on page one to pass down props into from another route.

Pass down Props and State

Passing down props can be really useful tool in your react tool belt. You may want to pass down something like a string that user might have inputted in a form. Lets setup

to pass down a prop down to

.

:

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

const Page1 = () =>{
     const [user, setUser] = useState(
          {
               id: 123,
               userName: 'Jane Smith'
          }
     );
     return (
          <Link to={'/page2:' + user.id } >
               <button>Submit</button>
          </Link>
     )
}

This is taking the state object and passing down the

value to the

component. To receive the prop in

:

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

const Page2 = () =>{
     const id = useLocation().pathname.split(':')[1];
     return(
          <>
               { id }
          </>
     )
}

Page2

will render 123 on the page that is passed down from

. Using the

object at the key of

will give you what component was passed down from and the prop that was passed down with it. By splitting it at the colon and taking the

index will give you the prop that was passed down. Alternatively you can pass down state this can be useful if you plan on passing down a larger object than just a string. If you change the

on

to this:

    <Link to="/page2" state={user}>
     <button>Location</Button>
</Link>

To receive the state from

:

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

const Page2 = () =>{
     const location = useLocation();
     const user = location.state;
     return(
          <p>
               { user.id }
               { user.name }
          </p>
     )
}

This will pass down the whole user object down from

down to

. This is really useful if you want pass down larger objects than just a string. Both methods have their own use cases depending on what you are doing and what you need done.

React Router is a great and need to use piece of technology that is essential to understand how to use in order to build a good react app. Not only is it great to add endpoints to your pages on your react app but it is one of the most intuitive tools to use. There are so many other great things that you can use React Router can do, I would suggest looking at the helpful links to take a deeper dive and feel free to reach out to me through any of my social links, if you find something that you learned about React Router that you love.

Helpful Links

W3 Schools

React Router Docs

Tyler McGinnis's Blog

GeeksforGeeks Blog