使用react-cookie获取浏览器Cookie时遇导出错误求助

这个错误是因为react-cookie v3及以上版本不再提供默认导出，你用的import Cookies from 'react-cookie'是旧版本（v2及以下）的写法，所以会报导出找不到的错误。

下面提供两种可行的解决方法：

方法一：使用官方推荐的Hooks方式（优先选择） #

react-cookie从v3开始推荐使用useCookies钩子，配合CookiesProvider上下文来处理cookie，步骤如下：

1. 在根组件中包裹CookiesProvider

import { CookiesProvider } from 'react-cookie';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <CookiesProvider>
    <App />
  </CookiesProvider>
);

2. 在App组件中使用useCookies钩子获取cookie

import { useCookies } from 'react-cookie';
import { useContext, useEffect, useState } from 'react';
import { AuthContext } from './path-to-your-auth-context'; // 替换成你的AuthContext实际路径

function App() {
  const { currentUser } = useContext(AuthContext);
  const [cookies] = useCookies(['accessToken']); // 指定要获取的cookie名称
  const [token, setToken] = useState(null);

  useEffect(() => {
    setToken(cookies.accessToken);
  }, [cookies.accessToken]); // 当accessToken变化时自动更新状态

  // 你的其他组件逻辑
  return <div>{/* 组件内容 */}</div>;
}

这种方式的优势是能自动感知cookie的变化，同步更新组件状态，完全契合React的状态管理模式。

方法二：直接实例化Cookies对象（不推荐） #

如果不想用上下文和钩子，也可以通过命名导入Cookies类并实例化的方式来使用：

import { Cookies } from 'react-cookie';
import { useContext, useEffect, useState } from 'react';
import { AuthContext } from './path-to-your-auth-context';

const cookies = new Cookies(); // 实例化Cookies对象

function App() {
  const { currentUser } = useContext(AuthContext);
  const [token, setToken] = useState(null);

  useEffect(() => {
    const tokenFromCookie = cookies.get("accessToken");
    setToken(tokenFromCookie);
  }, []);

  // 你的其他组件逻辑
}

注意：这种方式无法自动监听cookie的变化，如果cookie在外部被修改，组件不会自动更新状态，需要手动处理。

内容的提问来源于stack exchange，提问作者VijayRathod20