I am trying to upgrade React-Router v6 to v7. I totally followed the guide, but somehow I am getting this error accessing this URL "http://localhost:30000/dashboard":

Matched leaf route at location "/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=5c7cb654:6100:3)
  at RequireAuth (authContext.tsx:84:31)
  at SidebarProvider (sidebarContext.tsx:13:35)
  at AuthProvider (authContext.tsx:35:32)
  at Router (react-router.js?v=5c7cb654:6043:13)
  at BrowserRouter (react-router.js?v=5c7cb654:8070:3)
  at App (App.tsx:12:51)

import { BrowserRouter, Navigate, Route, Routes } from "react-router";
import AdminApp from "./AdminApp";
import DashboardApp from "./DashboardApp";
import { AuthProvider, RequireAuth } from "./context/authContext";
import NotificationContext, {
  useNotification,
} from "./context/notificationContext";
import { SidebarProvider } from "./context/sidebarContext";
import Notification from "./ui/Notification";

const App = () => {
  const [{ show, severity, message }, dispatch] = useNotification();

  return (
    <BrowserRouter>
      <AuthProvider>
        <NotificationContext.Provider value={dispatch}>
          <SidebarProvider>
            <RequireAuth>
              <Routes>
                <Route
                  path="/"
                  element={<Navigate to="dashboard" replace />}
                />
                <Route path="admin">
                  <Route path="*" element={<AdminApp />} />
                </Route>
                <Route path="dashboard">
                  <Route path="*" element={<DashboardApp />} />
                </Route>
              </Routes>
            </RequireAuth>
          </SidebarProvider>
          {show && <Notification type={severity} text={message} />}
        </NotificationContext.Provider>
      </AuthProvider>
    </BrowserRouter>
  );
};

export default App;

I am trying to upgrade React-Router v6 to v7. I totally followed the guide, but somehow I am getting this error accessing this URL "http://localhost:30000/dashboard":

Matched leaf route at location "/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=5c7cb654:6100:3)
  at RequireAuth (authContext.tsx:84:31)
  at SidebarProvider (sidebarContext.tsx:13:35)
  at AuthProvider (authContext.tsx:35:32)
  at Router (react-router.js?v=5c7cb654:6043:13)
  at BrowserRouter (react-router.js?v=5c7cb654:8070:3)
  at App (App.tsx:12:51)

import { BrowserRouter, Navigate, Route, Routes } from "react-router";
import AdminApp from "./AdminApp";
import DashboardApp from "./DashboardApp";
import { AuthProvider, RequireAuth } from "./context/authContext";
import NotificationContext, {
  useNotification,
} from "./context/notificationContext";
import { SidebarProvider } from "./context/sidebarContext";
import Notification from "./ui/Notification";

const App = () => {
  const [{ show, severity, message }, dispatch] = useNotification();

  return (
    <BrowserRouter>
      <AuthProvider>
        <NotificationContext.Provider value={dispatch}>
          <SidebarProvider>
            <RequireAuth>
              <Routes>
                <Route
                  path="/"
                  element={<Navigate to="dashboard" replace />}
                />
                <Route path="admin">
                  <Route path="*" element={<AdminApp />} />
                </Route>
                <Route path="dashboard">
                  <Route path="*" element={<DashboardApp />} />
                </Route>
              </Routes>
            </RequireAuth>
          </SidebarProvider>
          {show && <Notification type={severity} text={message} />}
        </NotificationContext.Provider>
      </AuthProvider>
    </BrowserRouter>
  );
};

export default App;

• javascript
• reactjs
• react-router
• react-router-dom

• What are you trying to render on exactly "/dashboard"? What does DashboardApp render? Please edit to clarify what you are trying to accomplish and include a complete minimal reproducible example of the relevant code you are working with. – Drew Reese Commented Feb 5 at 16:06

2 Answers 2

In the original dashboard route you didn't specify an element, so it considered as wildcard route because you mentioned as *.

so provide an element for dashboard route

 <Route path="dashboard">
   <Route path="*" element={<DashboardApp />} />
 </Route> 

Instead of the above one, you can try anyone of the below:
 
 <Route path="dashboard/*" element={<DashboardApp />} />

 **Or**

 <Route path="dashboard">
   <Route index element={<DashboardApp />} />
 </Route> 

**Or if you have nested routes try this** 

<Route path="dashboard">
    <Route index element={<DashboardApp />} /> {/* Matches /dashboard */}
    <Route path="header" element={<Header />} /> {/* Matches /dashboard/header*/}
    <Route path="banner" element={<Banner />} /> {/* Matches /dashboard/banner*/}
  </Route>

 

The DashboardApp will be rendered on any "/dashboard/*" sub-route, i.e. "/dashboard/a", "/dashboard/b", etc, but there is apparently no route matching exactly the "/dashboard" route path.

If you would like for DashboardApp to also be rendered on exactly "/dashboard" then also specify this to be an index route.

Example:

<Route path="dashboard">
  <Route
    index    // <-- matches "/dashboard" exactly
    path="*" // <-- matches any "/dashboard/*" path
    element={<DashboardApp />}
  />
</Route>

If Dashboard is implemented in such a way there there is no actual content to render on exactly "/dashboard" then update the redirect to navigate to a route that does exist.

Example:

const DashboardApp = () => (
  <>
    ...
    <Routes>
      <Route path="a" element={<DashboardA />} />
      <Route path="b" element={<DashboardB />} />
      <Route path="c" element={<DashboardC />} />
      ...
    </Routes>
  </>
);

<Routes>
  <Route
    path="/"
    element={(
      <Navigate
        to="dashboard/B" // <-- redirect to existing route
        replace
      />
    )}
  />
  <Route path="admin">
    <Route path="*" element={<AdminApp />} />
  </Route>
  <Route path="dashboard">
    <Route path="*" element={<DashboardApp />} />
  </Route>
</Routes>