React Router V6.8.1路由匹配失败问题求助

核心错误点 #

你的代码存在两处关键问题，导致路由无法匹配：

1. 路由配置属性大小写错误
   React Router v6 中，createBrowserRouter 的嵌套路由配置属性是小写的 children，但你代码里写的是大写的 Children，这会导致子路由无法被正确注册，手动修改URL访问也找不到对应路由。

2. 导航链接路径错误
   Navbar 中所有 Link 组件的 to 属性都设置为 #，点击导航不会跳转到正确的路由路径；同时 Logo 的链接也用了 #，无法回到首页。

修正后的代码 #

1. Index.js（修复路由配置）

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    // 修正：将大写的Children改为小写的children
    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>
);

2. Navbar.js（修复导航路径）

export default function Navbar() {
    // 修正：替换path为实际路由路径
    const navigation = [
        { name: "All Tasks", path: "/all-todos" },
        { name: "Todo", path: "/todo" },
        { name: "Done", path: "/done" },
    ];

    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">
                                {/* 修正：Logo链接改为首页路径 */}
                                <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} 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>
    );
}

修复说明 #

• 修正 children 大小写后，React Router 会正确识别嵌套路由，访问 /all-todos、/done、/todo 时能匹配到对应的组件。
• 修正导航路径后，点击 Navbar 的链接会跳转到正确的路由，同时 Logo 点击可返回首页。

内容的提问来源于stack exchange，提问作者Abdul-razak Twaha