Notes on React Router

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

https://reactrouter.com/en/main

Building React Router part of Dave Gray tutorial, https://raviswdev.blogspot.com/2024/03/building-react-router-part-of-dave-gray.html

Perhaps it may be better to skip React Router part of Dave Gray tutorial as it covers v5 and then updates it to v6. Instead we can use the following tutorial which is directly on v6:

React Router 6 – Tutorial for Beginners, https://www.youtube.com/watch?v=59IXY5IDrBA, 1 hr 17 mins, published on May 4, 2022 by freeCodeCamp.org. Source code: https://github.com/john-smilga/react-router-6-tutorial .

NavLink, https://reactrouter.com/en/main/components/nav-link

The final version App does not show images. That can be fixed by renaming final data.js to something else (to save it, just in case), and then copying data.js of src directory into final directory.

Learn React Router v6 In 45 Minutes, https://www.youtube.com/watch?v=Ul3y1LXxzdU, 46 mins, published Aug 2, 2022. First around 20 or so minutes (till initial part of nested routes) was very useful to understand basic Routes/Route usage.

https://reactrouter.com/en/main/start/tutorial

Why Should You Use a Router in React.js?, https://www.simplilearn.com/tutorials/reactjs-tutorial/routing-in-reactjs

React Router DOM, https://www.npmjs.com/package/react-router-dom

https://github.com/remix-run/react-router

https://www.freecodecamp.org/news/how-to-use-react-router-version-6/ uses JSX for Router related components (e.g. ..) and so is easier to follow than https://reactrouter.com/en/main/start/tutorial which uses method(s) (e.g. createBrowserRouter() method).

Nested routes, Outlet, Navigate and how to protect routes are covered in this text tutorial: How to use React Router v6 in React apps, https://blog.logrocket.com/react-router-v6-guide/ .

[About Breadcrumb navigation menu:] What is Breadcrumb & How Does It Ease Navigation? Explained with Examples, https://vwo.com/blog/why-use-breadcrumbs/

“NavLink”, https://reactrouter.com/en/main/components/nav-link

Specifying color of active link in a NavLink navbar (using above article info.):

Component in JSX:

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

const StyledNavbar = () => {

  return (

    <div id="stylednavbar">

      <NavLink to="/" className="navbar">

        Home

      </NavLink>

      <NavLink to="/about" className="navbar">

        About

      </NavLink>

    </div>

  );

};

export default StyledNavbar;

...

CSS in App.css:

/* > immediate children selector ... Works to make active link specified color */

/* #stylednavbar > a.active { */

/* " " descendent selector ... Works to make active link specified color*/

#stylednavbar a.active {

  color: red;

}

useNavigate hook, https://reactrouter.com/en/main/hooks/use-navigate

“Navigate”, https://reactrouter.com/en/main/components/navigate

...

How to Get the Current Route/URL in React Router, https://medium.com/codingbeauty-tutorials/react-router-get-current-route-9c2e6bd8d689 

...

From: Wrapping a react-router Link in an html button, https://stackoverflow.com/questions/42463263/wrapping-a-react-router-link-in-an-html-button

    <Link to="/dashboard">
          <button type="button">
               Click Me!
          </button>
      </Link>
  

Above code (slightly modified for my use) worked.