Biblotrh/react_router_latest_version

Explore react router version 6.12.1 with Meal DB REST API

Latest Version of React Router DOM 🚀🚀🚀

Recently, react-router dom has got an updated version that is 6.16.0 and brings some new and easiest features that will really help to make a lightweight client-side rendering application.

Key Features

• Routers
• Router Components
• Route
• Components
• Hooks
• Fetch Utilities
• Utilities

These are the remarkable features that highly represent the unique thinking of the react-router community. These are the remarkable features that highly represent the unique thinking of the react-router community.

Installation

1. Create a new React App with Vite

npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd <your new project directory>
npm install react-router-dom
npm run dev

2. If you have an already react project, then just install react-router DOM Copy the command and past it into the terminal

npm install react-router-dom

5. Start the server:

npm run dev

Follow the steps

Step 1: First of all, create a router folder under the src folder and then create a router.js file to create your initial route

Folder Structure
src
├── router
      └── router.js

//past it into the router.js file
import { createBrowserRouter } from "react-router-dom";

export const router = createBrowserRouter([

]);

Now our initial router is created without a path and element. Do not be concerned about it we will implement all the features later.

It's time to import our initial route in the App.js file wrapped with RouterProvider from react-router-dom

//past it into App.js file

import { RouterProvider } from "react-router-dom";
import "./App.css";
import { router } from "./router/router";

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

Step 2: We are ready to create multiple components for our application. As if, we can set the destination path of our component. We will create multiple components in our components folder which is already placed under the src folder

Folder Structure
src
├── components
      └── Home.js
      └── Foods.js
      └── About.js

Step 3: Create a Layout folder and Root.js file inside the Layout under the src folder. Create a header folder and Header.js to navigate one route to another route under the components folder.

Folder Structure
src
├── components
        ├── Header
│             └── Header.js
├── Layout
      └── Root.js

Now we have multiple components for our application and header file to navigate one route to another route.

We will import the header file inside the Root.js file and also import from react-router-dom so that we can render all the children's components inside the Root.js file.

//Past it into the Header.js file
import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <div>
      <NavLink to="/home">Home</NavLink>
      <NavLink to="/foods">Foods</NavLink>
      <NavLink to="/about">Abouts</NavLink>
    </div>
  );
};

export default Header;

//Past it into Root.jsx file
import { Outlet } from "react-router-dom";
import Header from "../components/header/header";

const Root = () => {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
};

export default Root;

And our router.js file looks like

//Past it into the router.js file
import { createBrowserRouter } from "react-router-dom";
import Home from "../components/home/home";
import Foods from "../components/foods/foods";
import About from "../components/about/about";
import Root from "../Layout/Root";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { path: "/", element: <Home /> },
      { path: "home", element: <Home /> },
      { path: "foods", element: <Foods /> },
      { path: "about", element: <About /> },
    ],
  },
]);

Now we have successfully created components, Link and Nested Rotue using React Router DOM. 👏👏👏