React Router 的 createBrowserRouter 在 vite 上无法正常工作

Question

有人可以帮我解决这个简单的结构吗？这里唯一的问题是链接不起作用，它无法转到“/all-notes”路径，它在控制台上显示错误，例如 ErrorBoundary 和 404 Not find。我在这里犯了什么错误吗？据我所知，我在这里没有看到任何错误顺便说一句，我使用 ExpressJs/Vite React 作为我的技术堆栈。

我的main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import './index.css'
import { ClerkProvider } from '@clerk/clerk-react'
import SignInPage from './sign-in/[[...index]].jsx'
import SignUpPage from './sign-up/[[...index]].jsx'
import Contents from './components/Contents.jsx'
import Root from './Root.jsx' 
import Archive from './components/Archive.jsx'
 
// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
if (!PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key")
}

const router = createBrowserRouter([
   {
     path: '/',
     element: <Root />,
     loader: '',
     ErrorBoundary: '',
     children: [
           {
            path: 'all-notes',
            element: <Contents />,
            lazy: '',
           },
           {
            path: 'archives',
            element: <Archive />,
           }
       ],
   }, 
   {
    path: '/sign-in',
    element: <SignInPage />,
    loader: '',
   }, 
   {
    path: '/sign-up',
    element: <SignUpPage />,
    loader: '',
   },
   {
      path: '/archive',
      element: <Archive />,
      loader: '',
   }
], {
   future: {
      v7_partialHydration: true
   }
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
     <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
        <RouterProvider router={router} />
     </ClerkProvider>
  </React.StrictMode>,
)

这是我的侧边栏，带有多个链接，这是我想开始链接“/”路径上列出的其他子组件的地方

import { Plus, ScrollText, ArchiveRestore, Heart } from 'lucide-react'
import { NavLink, Outlet } from 'react-router-dom'

const noteOptions = [
     {
        id: 1,
        icon: <ScrollText size={32}/>,
        desc: 'All notes'
     }, 
     {
        id: 2,
        icon: <ArchiveRestore size={32}/>,
        desc: 'Archives'
     },
     {
        id: 3,
        icon: <Heart size={32}/>,
        desc: 'Favorites'
     }
]
export default function Sidebar() {
  return (
    <div className="w-[300px] p-3 border  border-[#3DA6E1] h-screen min-h-full">
      <div className="w-full">
          
          <div className='mx-auto mt-4 flex items-center w-full justify-center'>
             <button className="px-4 bg-[#1698E1] flex items-center gap-2  py-2 text-white ">
                <Plus size={20} color='#ffff'/>
                <span className='font-medium'>Add new note</span>
             </button>
          </div>

          <div className='mt-[40px] flex flex-col gap-2 items-start'>
               <h2 className='text-[24px] font-medium text-[#1698E1]'>Notes</h2>

               <div className='flex mt-2  px-3 rounded-xl flex-col gap-3 h-auto w-auto'>   
                   {noteOptions.map(item => (
                      <div key={item.id} className='min-w-[200px] hover:bg-[#3B95C8] duration-150 ease-out group  p-2 rounded-xl min-h-[40px] '>
                       <NavLink to="all-notes" className='flex group-hover:text-white  items-center w-full h-full text-[#3B95C8] gap-4 flex-row'>
                          {item.icon}
                         <p className='text-[20px] font-medium'>{item.desc}</p>
                       </NavLink>
                    </div>
                   ))}
                      
                  <NavLink to='/archive'>ARCHIVE</NavLink>

               </div>
          </div>
      </div>
    </div>
  )
}

我尝试查找 React Router 文档，但找不到答案。

Answer 1

const router = createBrowserRouter([
   {
     path: '/',
     element: <Root />,
     children: [
           {
            path: '/all-notes', // Absolute path
            element: <Contents />,
           },
           {
            path: '/archives', // Absolute path
            element: <Archive />,
           }
       ],
   }, 
   {
    path: '/sign-in',
    element: <SignInPage />,
   }, 
   {
    path: '/sign-up',
    element: <SignUpPage />,
   },
   {
      path: '/archive',
      element: <Archive />,
   }
], {
   future: {
      v7_partialHydration: true
   }
})

确保更新侧边栏组件中的 NavLink 组件以也使用绝对路径：

<NavLink to="/all-notes" className='flex group-hover:text-white  items-center w-full h-full text-[#3B95C8] gap-4 flex-row'>
   {item.icon}
   <p className='text-[20px] font-medium'>{item.desc}</p>
</NavLink>