cookie 值未定义（react-cookie 2.0.6）

Question

I have a problem with implementing react cookies v^2. I use webpack-dev-server for testing.
Here is a conlose log:

Warning: Failed context type: The context cookies is marked as required in withCookies(App) , but its value is undefined .
in withCookies(App)
in Provider

/App.jsx:

import React, { Component } from 'react';
import { CookiesProvider, withCookies, Cookies} from 'react-cookie'
import {Route, Switch, BrowserRouter} from 'react-router-dom';

//import RequireAuth from './RequireAuth';
import NotFoundPage from './NotFoundPage';
import LandingPage from './LandindPage';
import WorkSpace from './WorkSpace';
import ActivationPage from './ActivationPage';

class App extends Component {
  render() {
    return (
      <CookiesProvider>
        <BrowserRouter>
          <Switch>
            <Route exact={true} path="/" component={LandingPage}/>
            <Route path="/workspace" component={WorkSpace}/>
            <Route exact path="/activation" component={ActivationPage}/>
            <Route path="*" component={NotFoundPage}/>
          </Switch>
        </BrowserRouter>
      </CookiesProvider>
    );
  }
}

export default withCookies(App);

/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import { Provider } from 'react-redux';

import App from './components/App';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
  <Provider store = {store}>
    <App/>
  </Provider>
  ,
  document.getElementById('root'));

Answer 1

It appears that the functionality previously present in the react-cookie npm package has been moved to universal-cookie . The relevant example from the universal-cookie repository now is:

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman

Source (all credits to author of the orginal answer)

Answer 2

HttpOnly

If you're convinced you're using universal-cookie (or similar package) correctly, and still getting undefined :
Check (in the source code) how the cookie is being set (or inspect it with a cookie inspector browser extension, like EditThisCookie for Chrome , and check the HttpOnly property).
If HttpOnly is set to true , then (by definition) no javascript will be able to access it (that's the point of HttpOnly ). Hence the value would be returned as undefined .

From developer.mozilla.org/en-US/docs/Web/HTTP/Cookies :

Restrict access to cookies

A cookie with the HttpOnly attribute is inaccessible to the JavaScript Document.cookie API; it is sent only to the server. For example, cookies that persist server-side sessions don't need to be available to JavaScript, and should have the HttpOnly attribute. This precaution helps mitigate cross-site scripting ( XSS ) attacks.