React Router v6.4

As mentioned at the beginning of this chapter, React Router v6.4 introduces a new way of implementing routes.

Let’s rewrite our last example to explore the differences. The first difference is that instead of using AppRoutes as we did previously, we will now add our routes directly to our App.tsx file. Let’s begin by modifying our main.tsx and removing AppRoutes:

import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root') as HTMLElement).render(
<App />
)

Now, in our App.tsx file, we need to import some new functions from react-router-dom and load the components that will be rendered for each URL:

import { FC } from 'react'
import { 
  createBrowserRouter, 
  createRoutesFromElements, 
  Route, 
  Link, 
  Outlet, 
  RouterProvider 
} from 'react-router-dom'
import About from './components/About'
import Home from &apos...