Using createBrowserRouter and createRoutesFromElements to create routes and navigate between to components – Javascript

The Solutions:

Solution 1: Wrap the Route Provider Around the App Component

You need to wrap the Route provider around the app component to ensure that the context is available to the application. This will make the RouterProvider available to the entire application, allowing for seamless navigation between components.

function App() {
  return (
    <RouterProvider router={router}>
      <div>
        <nav className="nav">
          <Link to="/" className="nav-item">Home</Link>
          <Link to="/about-me" className="nav-item">About Me</Link>
        </nav>
      </div>
    </RouterProvider>
  )
}

Solution 2: Using `RouterProvider` with `root route element`

RouterProvider doesn’t accept direct children. Instead, you can use a root route element to wrap your routes. For example:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Layout />}> // <=========
      <Route index path="/" element={<HomePage />} />
      <Route path="about-me" element={<AboutMe />} />
    </Route>
  )
);

// Layout.tsx

const Layout: FC<IProps> = ({ children }) => {
  return (
    <>
      <nav className="nam">
        <Link to="/" className="nav-item">Home</Link>
        <Link to="/about-me" className="nav-item">About Me</Link>
      </nav>
      <Outlet /> // <== e.g to display AboutMe content if route is "about-me"
    </>
  );
};

Video Explanation:

The following video, titled "React Router in Depth #3 - Router Provider, createBrowserRouter ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

This video provides further insights and detailed explanations related to the content discussed in the article.