[Docs]: Upgrading from V6

[amgowda42]

Splat will not directly catch inside the child route if we use path "*" and element as Parent Component.

If you define dashboard/* directly in Route, React Router expects child routes to be handled inside Dashboard. However, the issue happens when React Router doesn’t recognize the child properly due to missing hierarchy.

<Routes>
  <Route path="/" element={<Home />} />
-  <Route path="dashboard/*" element={<Dashboard />} />
+  <Route path="dashboard">
+    <Route path="*" element={<Dashboard />} />
+  </Route>
</Routes>

[timdorr]

I'm not seeing this with another project using 7.3.0 in library mode. Can you add a reproduction of this issue?

[amgowda42]

Hey Tim Dorr See Basically in the Docs mentioned that when you upgrade from v6 where we need to follow below snippet according to Docs

Code Snippet in the Docs :-

<Routes>
  <Route path="/" element={<Home />} />
-  <Route path="dashboard/*" element={<Dashboard />} />
+  <Route path="dashboard">
+    <Route path="*" element={<Dashboard />} />
+  </Route>
</Routes>

Now the same way if I defined the router which gives the waring such as element configured on this path its of course Under Standing that no element is configured on the "*"

my Code Snippet :-

<Route path="admin-dashboard">
          <Route
            path="*"
            element={
              <ProtectedLayout>
                <AdminDashBoardPage />
              </ProtectedLayout>
            }
          />
        </Route>

The admin-dashboard route file follows :-

<section className="flex h-full">
        <Sidebar />
        <div className="flex-1 overflow-y-auto px-3 py-4 bg-[#f8f7ec]">
          <Routes>
            <Route
              path="dashboard"
              element={
                <Suspense fallback={<div>Loading Dashboard.....</div>}>
                  <DashBoard />
                </Suspense>
              }
            />
            <Route path="get-all-visitors" element={<GetAllVisitors />} />
            <Route path="settings" element={<Settings />} />
            <Route path="get-all-appointment" element={<GetAllAppointment />} />
          </Routes>

The Error throughs as:-

hook.js:608 Matched leaf route at location "/admin-dashboard" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page. Error Component Stack
    at Routes (react-router.js?v=cb3ea672:6101:3)
    at App (<anonymous>)
    at Router (react-router.js?v=cb3ea672:6044:13)
    at BrowserRouter (react-router.js?v=cb3ea672:8211:3)
    at Provider (chunk-ZIXP5V4Y.js?v=cb3ea672:923:11)

hook.js:600 Matched leaf route at location "/admin-dashboard" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page. Error Component Stack
    at Routes (react-router.js?v=cb3ea672:6101:3)
    at App (<anonymous>)
    at Router (react-router.js?v=cb3ea672:6044:13)
    at BrowserRouter (react-router.js?v=cb3ea672:8211:3)
    at Provider (chunk-ZIXP5V4Y.js?v=cb3ea672:923:11)

I am using React Router library mode
The version is :- 7.1.5

[timdorr]

That is referring to the future flag for relative links with splats. If you don't have those, it doesn't apply.