主页在本地主机中正常工作，但在 Vercel 上托管后抛出错误

Question

我使用react、react-router-dom、redux和localStorage创建了一个todo应用程序。它在 localhost 中工作正常，但在 vercel 中托管后，它显示我的错误页面。 当我转到“hostURL/addtodo”时，它显示了预期的页面。 无法理解我做错了什么。

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/addtodo', element: <AddPage /> },
      { path: '/edit/:id', element: <EditPage /> },
    ],
    errorElement: <ErrorPage />,
  },
])

function App() {
  return <RouterProvider router={router} />
}

function RootLayout() {
  return <Outlet />
}

const [todos, setTodos] = useState(() => {
    const localValue = localStorage.getItem('MYTODOS')
    if (typeof localValue === 'undefined') return []
    //console.log(localValue)
    return JSON.parse(localValue)
  })

  useEffect(() => {
    localStorage.setItem('MYTODOS', JSON.stringify(todos))
  }, [todos])

GitHub 链接：Repo 托管后：托管

我在互联网上搜索但没有找到任何有用的信息。我希望有人找出错误并修复它。

Answer 1

路由没有问题！.

问题

您已使用 typeof localValue === 'undefined' 来检查本地存储值是否未定义。这个条件永远不会成立，因为 typeof 将返回一个字符串，并且它永远不会等于字符串 'undefined'。

解决方案

它使用 localValue ？ JSON.parse(localValue) : [] 检查本地存储值是否为真，然后解析它，否则设置一个空数组。

const [todos, setTodos] = useState(() => {
    const localValue = localStorage.getItem('MYTODOS');
    return localValue ? JSON.parse(localValue) : [];
  });

  useEffect(() => {
    localStorage.setItem('MYTODOS', JSON.stringify(todos));
  }, [todos]);

我已经提取了您的存储库，它在本地也显示了相同的托管网站错误。我有一些空闲时间。我已经修复了你的仓库中的 7 个错误。 公关链接

请检查一下，现在 Todo 工作正常。

调试愉快！请为解决方案点赞！