React project setup with react-router-v6 with dynamic layout.

Photo by Lautaro Andreani on Unsplash

I started searching for a blog that would teach me about how to structure the react application where I have to render components using Layouts dynamically and need to handle routing as well.

While going through different articles and even official documentation I find it a little hard for beginner developers to quickly set everything.

To solve that issue, I am writing this quick article so we can set up our project in less time.

Let’s start.

firstly, we have to set up a react project using Vite.

run the below command to set up a new react project.

npm create vite@latest

After creating the react app with above command install react-router

To install the react-router run the below command.

npm install react-router-dom

Now the coding part comes the steps are simple.

In the src folder, create one folder named routes and inside that create one file routes.js.

import Root from './Root'
import ErrorPage from './ErrorPage'
import Contact  from './Contact'
export const routes=[
    {
        path: "/",
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
          {
            path: "contacts/:contactId",
            element: <Contact />,
          },
        ],
      },
]

As we see in the above code snippet, we are maintaining one array of objects where each object in the array represents one route.

Now we will talk about the different properties of the object.

1] path where we specify our route path

2]Element in which we specify the component which we want to render

3]Error element used to specify the component that we want to render when the path does not match

4] A child is an array where we can specify the child routes

Now comes the last step.

In App.js we have to create a browser router and in react provider, we have to pass our routes array.

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import { routes } from './router';

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

export default App;

That’s it the routing setup is done now whenever any new route comes, we have to just add it to our route Object.

But wait, suppose we have one application that we have to design from the start and after seeing Figma you find out that on every page we have a sidebar, header, and footer which is common.

and in middle, we are rendering components based on different routes how to handle that situation.

To handle that situation, we have created one folder named Layout inside which we have to render our common components.

React-router provides us with one component named <Outlet> which we can use to render components based on routes.

function Layout (){
return (
<>
 <Header/>
 <SideBar/>
 <main>
   <Outlet>
 </main>
 <footer></footer>
</>
)
}

In the above code snippet as you say we have rendered the common component and inside the main tag, we used the Outlet components so whenever the route changes the components that we pass will render inside the main section.

Below is the updated routes array based on the Layout as our root component.

Now on the first render, we are rendering the common components but with that, we have to also render the component that we want to show in the first load.

so, to handle that we have to make the value of the path the same, and in children, we have to set the index property as true so the child route with the same path will be treated as a base component.

import Root from './Root'
import ErrorPage from './ErrorPage'
import Contact  from './Contact'
export const routes=[
    {
        path: "/",
        element: <MainLayout />,
        errorElement: <ErrorPage />,
        children: [
          {
            path: "/",
            element: <Contact />,
            index: true
          },
          {
            path: "/contact",
            element: <Contact />,
          },
        ],
      },
]

Similarly, if we have different layouts for different pages then we can add more Objects like same above.

Inside the child route, we can also go one deeper in routes by creating nested children routes but while doing so we have to use Outlet in its parent component where we want to render (remember that)

So, this was the latest way we could achieve it using react-router v6.

Thanks for making it to the end.

Happy Learning

Like and follow if this article helps you