DEV Community

Ali Hamza
Ali Hamza

Posted on

Day 130 of Learning MERN Stack

Hello Dev Community! ๐Ÿ‘‹

It is officially Day 130 of my software engineering marathon! Today, I checked off a massive architectural milestone in my React journey: moving away from primitive conditional view states and transforming my Social Dashboard into a true Multi-Page Application using React Router DOM (v6)! โš›๏ธ๐Ÿ—บ๏ธ๐Ÿ›ฃ๏ธ

Instead of using standard page updates that force full browser tab refreshes, the app now parses URL endpoints nativelyโ€”serving clean layout matching routes within milliseconds!


๐Ÿ› ๏ธ Deconstructing the Day 130 Client Routing Grid

As captured across my root application orchestration workspace in "Screenshot (289).png", the setup implements clean semantic data routing paths:

1. Declaring the Data Router Configuration Tree

  • Bypassed old legacy routing wrapper tags by adopting the production-grade programmatic instantiation engine:

javascript
  const router = createBrowserRouter([
    {
      path: "/",
      element: <App />,
      children: [
        { path: "/", element: <PostList /> },
        { path: "/create-post", element: <CreatePost /> }
      ]
    }
  ]);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)