This error occurs when defining nested routes in React Router v6+ with relative paths that do not start with the correct prefix. React Router requires relative paths to explicitly begin with "./" or "../" to differentiate them from absolute paths. Using the correct path syntax ensures proper route nesting and navigation.
React Router v6 introduced support for relative route paths to simplify nested routing configuration. When you define a child route within a parent route, you can use relative paths that are resolved relative to the parent route's path. However, React Router enforces strict syntax: relative paths must explicitly start with "./" (current level) or "../" (parent level) to avoid ambiguity. This error appears when you try to define a nested route with a path that looks relative but does not use the required prefix. The framework needs this explicit syntax to distinguish between relative paths (which build on the parent path) and absolute paths (which define routes from the application root). Without the prefix, React Router cannot determine your intent and throws this validation error.
Check the error stack trace in your console to identify which route configuration is throwing the error. Look for Route components nested within other Route components, especially in your routing setup files. The error typically points to a specific file and line number.
// The error will reference a line like this:
<Route path="dashboard"> {/* parent route */}
<Route path="settings" element={<Settings />} /> {/* This causes the error */}
</Route>For nested routes that should be relative to their parent, add the "./" prefix to the path prop. This tells React Router to resolve the path relative to the parent route.
// WRONG - causes the error
<Route path="dashboard">
<Route path="settings" element={<Settings />} />
</Route>
// CORRECT - use "./" for relative paths
<Route path="dashboard">
<Route path="./settings" element={<Settings />} />
</Route>
// This creates routes: /dashboard and /dashboard/settingsIf you need a child route to reference a sibling or parent-level path, use the "../" prefix to go up one level before resolving the path.
<Route path="dashboard">
<Route path="./settings" element={<Settings />} />
<Route path="./profile">
{/* Navigate back to dashboard/settings from profile */}
<Route path="../settings" element={<Navigate to="/dashboard/settings" />} />
</Route>
</Route>If you want a route to be defined from the application root (not relative to parent), use an absolute path starting with "/" instead. Absolute paths do not need the "./" or "../" prefix.
<Route path="dashboard">
{/* Relative to dashboard */}
<Route path="./settings" element={<Settings />} />
{/* Absolute path - not relative to dashboard */}
<Route path="/admin" element={<Admin />} />
</Route>
// Creates routes: /dashboard, /dashboard/settings, /adminIndex routes (routes that render at the parent's path) should use the index prop instead of an empty or relative path.
// CORRECT - index route pattern
<Route path="dashboard">
<Route index element={<DashboardHome />} />
<Route path="./settings" element={<Settings />} />
</Route>
// NOT: <Route path="" element={<DashboardHome />} />
// NOT: <Route path="./" element={<DashboardHome />} />If you define routes using the useRoutes hook with a configuration object, ensure nested route paths include the "./" or "../" prefix.
const routes = useRoutes([
{
path: "dashboard",
element: <Dashboard />,
children: [
// WRONG: path: "settings"
{ path: "./settings", element: <Settings /> },
{ path: "./profile", element: <Profile /> }
]
}
]);This relative path syntax requirement was introduced in React Router v6. Ensure you are using v6 or later and have updated your route configuration to match the v6 API.
# Check your React Router version
npm list react-router-dom
# Update to latest version if needed
npm install react-router-dom@latestReact Router v6 introduced this explicit relative path syntax to eliminate ambiguity and improve developer experience. In v5, nested routes automatically inherited the parent path, which could lead to confusion about whether a path was relative or absolute. The v6 design makes intent explicit: "./" means "relative to current parent", "../" means "go up one level", and "/" means "absolute from root". When migrating from v5 to v6, a common pattern is to flatten deeply nested routes or use the createBrowserRouter API with route configuration objects instead of JSX. For complex applications, consider using createRoutesFromElements to generate route configs from JSX while maintaining explicit relative paths. If you have many nested routes, the Outlet component in parent routes controls where child routes render, and the relative path syntax works seamlessly with Outlet. For dynamic route segments (paths with :id), relative paths still apply: a route at path="./users/:id/settings" resolves relative to its parent. The relative path syntax also works with relative links in Link and NavLink components, allowing navigation like <Link to="../settings">Back to Settings</Link>.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite