How to fix No routes matched location "/path" in React

// ❌ Wrong - typo in path
<Route path="/dashbord" element={<Dashboard />} />

// ✅ Correct - path matches URL
<Route path="/dashboard" element={<Dashboard />} />

// ❌ Wrong - missing leading slash
<Route path="about" element={<About />} />

// ✅ Correct - with leading slash
<Route path="/about" element={<About />} />

import { Routes, Route } from 'react-router-dom';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/users/:id" element={<UserProfile />} />

      {/* Catch-all route - must be last */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

import { Routes, Route, Outlet } from 'react-router-dom';

// Parent layout component
function UsersLayout() {
  return (
    <div>
      <h1>Users</h1>
      <nav>
        <Link to="/users">All Users</Link>
        <Link to="/users/new">Create User</Link>
      </nav>
      {/* Child routes render here */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/users" element={<UsersLayout />}>
        <Route index element={<UsersList />} />
        <Route path="new" element={<CreateUser />} />
        <Route path=":id" element={<UserProfile />} />
      </Route>
    </Routes>
  );
}

// ❌ Wrong - v5 syntax doesn't work in v6
<Route path="/users/:id?" element={<Users />} />

// ✅ Correct - separate routes for v6
<Route path="/users" element={<Users />} />
<Route path="/users/:id" element={<Users />} />

// OR use a wildcard for subpaths
<Route path="/users/*" element={<Users />} />

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

location / {
  try_files $uri $uri/ /index.html;
}

/*    /index.html   200

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

// BrowserRouter - clean URLs, requires server config
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* routes */}
      </Routes>
    </BrowserRouter>
  );
}

// HashRouter - works everywhere, but URLs have #
import { HashRouter } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <Routes>
        {/* routes */}
      </Routes>
    </HashRouter>
  );
}