No routes matched - React Router V6.8.1

Question

I Get No routes matched location error in my React JS To-do Application despite having followed all the steps required as per the Officia guide by the React Router website.

At first i though the issue lies in the Navbar component - maybe i'm not doing something correctly but even when i try to manualy edit the url to a certain route, i still get the same problem

All source code here

All components are imported correctly, i just chose not to include imports section

Here is my Index.js:

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    Children: [
      {
        path: "all-todos",
        element: <AllTodos />

      },
      {
        path: 'done',
        element: <Done />
      },
      {
        path: "todo",
        element: <Todo />
      },
    ]
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
 

Here is App.js

function App() {
  return (
    <div className='flex flex-col min-h-screen'>
      <Navbar />
      <AddTask />
      <main className='flex-1 flex'>
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

export default App;

Here is one of the Routes (Done Component)

const Done = () => {
  return (
    <>
      <h2>Done</h2>
    </>
  )
}

export default Done

Here is Navbar:

export default function Navbar() {
    const navigation = [
        { name: "All Tasks", path: "#" },
        { name: "Todo", path: "#" },
        { name: "Done", path: "#" },
    ];



    return (
        <div className="w-full border-b border-gray-200">
            <nav className="max-w-screen-lg mx-auto relative flex flex-wrap items-center justify-between p-4 lg:justify-between">
                {/* Logo  */}
                <Disclosure>
                    {({ open }) => (
                        <>
                            <div className="flex flex-wrap items-center justify-between w-full lg:w-auto">
                                <Link to="#" className="flex font-extrabold items-center space-x-2 text-2xl text-indigo-500 dark:text-gray-100">
                                    To-do
                                </Link>

                                <Disclosure.Button
                                    aria-label="Toggle Menu"
                                    className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-gray-700 dark:focus:text-gray-300">
                                    <svg
                                        className="w-6 h-6 fill-current"
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24">
                                        {open && (
                                            <path
                                                fillRule="evenodd"
                                                clipRule="evenodd"
                                                d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
                                            />
                                        )}
                                        {!open && (
                                            <path
                                                fillRule="evenodd"
                                                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                                            />
                                        )}
                                    </svg>
                                </Disclosure.Button>

                                <Disclosure.Panel className="flex flex-wrap w-full my-5 lg:hidden">
                                    <>
                                        {navigation.map((item, index) => (
                                            **<Link key={index} to={item.path} className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-700">
                                                {item.name}
                                            </Link>**
                                        ))}
                                    </>
                                </Disclosure.Panel>
                            </div>
                        </>
                    )}
                </Disclosure>

                {/* menu  */}
                <div className="hidden lg:flex lg:items-center">
                    <ul className="items-center justify-end flex-1 pt-6 lg:pt-0 list-reset lg:flex">
                        {navigation.map((menu, index) => (
                            <li className="mr-3 nav__item" key={index}>
                                **<Link to={menu.path.toString()} className="inline-block p-2 font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none">
                                    {menu.name}
                                </Link>**
                            </li>
                        ))}
                    </ul>
                </div>
            </nav>
        </div>
    );
}

Answer 1

try to write your Children property with lowercase