How to fix Relative route path values must start with "./" or "../" in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 119 views

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.

Quick fix

Fixes Relative route path values must start with "./" or "../"

// The error will reference a line like this:
<Route path="dashboard"> {/* parent route */}
  <Route path="settings" element={<Settings />} /> {/* This causes the error */}
</Route>
  1. Locate the route definition causing the error
  2. Add "./" prefix to relative child route paths
  3. Use "../" to navigate up one level in the route hierarchy
  4. Use absolute paths when not nesting under parent
react — error
// The error will reference a line like this:
<Route path="dashboard"> {/* parent route */}
  <Route path="settings" element={<Settings />} /> {/* This causes the error */}
</Route>
Relative route path values must start with "./" or "../"

What this error means

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.

Typical symptoms

  • Application fails to start or crashes during route initialization
  • Console error: "Relative route path values must start with \"./..\" or \"../\""
  • Routes not rendering even though component code appears correct
  • Error occurs specifically when defining nested routes inside a parent Route component
  • Development server crashes or hot reload fails after modifying route configuration
  • TypeScript or build-time errors preventing compilation of route definitions

Common causes

  1. Defining a nested route path without the required "./" or "../" prefix (e.g., path="settings" instead of path="./settings")
  2. Attempting to use plain relative paths from React Router v5 syntax without updating to v6+ requirements
  3. Copying route examples from older documentation that did not require the explicit prefix
  4. Mixing absolute and relative path syntax incorrectly within nested route configurations
  5. Using an empty string path="" in contexts where React Router expects explicit relative syntax
  6. Defining routes programmatically with string concatenation that produces paths without the required prefix

How to fix "Relative route path values must start with "./" or "../""

1Locate the route definition causing the 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.

typescript
// The error will reference a line like this:
<Route path="dashboard"> {/* parent route */}
  <Route path="settings" element={<Settings />} /> {/* This causes the error */}
</Route>
2Add "./" prefix to relative child route paths

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.

typescript
// 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/settings
3Use "../" to navigate up one level in the route hierarchy

If 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.

typescript
<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>
4Use absolute paths when not nesting under parent

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.

typescript
<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, /admin
5Handle index routes correctly

Index routes (routes that render at the parent's path) should use the index prop instead of an empty or relative path.

typescript
// 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 />} />
6Update route configuration if using useRoutes hook

If you define routes using the useRoutes hook with a configuration object, ensure nested route paths include the "./" or "../" prefix.

typescript
const routes = useRoutes([
  {
    path: "dashboard",
    element: <Dashboard />,
    children: [
      // WRONG: path: "settings"
      { path: "./settings", element: <Settings /> },
      { path: "./profile", element: <Profile /> }
    ]
  }
]);
7Verify React Router version compatibility

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.

bash
# Check your React Router version
npm list react-router-dom

# Update to latest version if needed
npm install react-router-dom@latest

Advanced notes

React 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>.

Frequently asked questions

What does "Relative route path values must start with "./" or "../"" mean?
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. /" (parent level) to avoid ambiguity.
How do I fix "Relative route path values must start with "./" or "../""?
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.
What causes "Relative route path values must start with "./" or "../""?
Defining a nested route path without the required "./" or "../" prefix (e.g., path="settings" instead of path="./settings") Attempting to use plain relative paths from React Router v5 syntax without updating to v6+ requirements Copying route examples from older documentation that did not require the explicit prefix
Is the "Relative route path values must start with "./" or "../"" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading