Introduction

React Router is a standard way to add routing to your React application.

It allows you to navigate through the app using links that will change the URL. React Router can also allow for deep linking, meaning if you enter in a url, you can land in a certain spot in your applicaiton. It does all this while not breaking the back and forward buttons.

Source: Flavio Copes, "Introduction to React Router" React Router Quick Start

Components

React Router has three main types of components

• Routers
  • <BrowserRouter>: "Uses regular URL paths. These are generally the best-looking URLs, but...your server needs to serve the same page al all URLs". If you are serving your app out of an AWS S3 bucket, it is easy to do too.
  • <HashRouter>: put a # in the URL and your app parses what comes after it. You don't need your server to do anything special to set this up.
• Route Matchers
  • By wrapping your components in several complementary components, you can tell React Router to render components based on what the URL contains.
  • <Switch>: "Searches through its children elements to find one whose path matches the current URL." Once it finds a match, it only renders that component.
  • <Route>: Because <Switch> will search through everything, put your more specific paths first since it would only render the more general path first if it finds it. For example, if you have a routh for / and put that first, you will have issues. Your application will always match this route since / is the first part of the URL that React Router cares about. As a result, your other components will never render.
• Navigation
  • <Link>: add links to your application <Link to="/about">About</Link>
  • <NavLink>: a link that will also get a class "when its prop matches the current location"
  • <Redirect>: "When a <Redirect> renders, it will navigate using its to prop."

React Router Hooks

• React Router has changed along with React which means has its own hooks starting in version 5
• Longer explanation of React Router Hooks with Examples

Use a value from a URL segment in your code: useParams()

• It looks like this is used if you want to display some info from your route/URL on the page as opposed to managing query string parameters.

Make sure that name of your variable in your route matches the name you use when calling the hook

• <Route path="/:urlParagraphs?">
• let { urlParagraphs } = useParams();

Using useLocation() and a browser API lets you access query string parameters

• React Router doesn't provide any extra functionality for managing query string parameters. The docs recommend that you set up a custom hook instead and use the browser's URLSearchParams API. Unfortunately, this won't work in IE11.

• To get access to the URL in your app, use the useLocation() hook. It "returns the location object that represents the current URL." useLocation, React Router Docs

• Google's documentation for using this API is great, and they explain how to update the URL

  • Eric Bidelmanm, "Easy URL Manipulation with URLSearchParams", January 2016.

• Example: Query Parameters, React Router Docs

// A custom hook that builds on useLocation to parse
// the query string for you.
  function useQuery() { return new URLSearchParams(useLocation().search); }