How to use react-cookie - 10 common examples

preRender(req, res, app) {
      Cookie.plugToRequest(req, res);
      //console.log('preRender hook', app);
      // console.log(req.cookies);
      return Promise.await(getDataFromTree(app));
    },
    dehydrateHook(req, res) {

render() {
    console.log('App.props:', this.props);

    if (cookie.load(tokenKey) === undefined) {
      console.log('X-Token is missing!');
      /* message.error('请先登录系统!');
         this.history.pushState(null, '/signin'); */
    }

    console.log('current user:', this.state.user);
    const navMenu = this.state.user ?  : '';
    return (
      <div>
        <div>
          
          {navMenu}
          <div>
            {this.props.children}
          </div>
        </div></div>

import React from 'react';
import Link from 'next/link.js';
import axios from 'axios';
import { Cookies } from 'react-cookie';

const serverUrl = 'http://localhost:3001';

// set up cookies
const cookies = new Cookies();
class Index extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      token: cookies.get('token') || null
    }
  }

  onLoginClick = async () => {
    console.log("Login called");
    const response = await axios.get(serverUrl + '/api/login')
    const token = response.data.token;
    cookies.set('token', token);
    this.setState({
      token: token

import React from 'react';
import axios from 'axios';
import { Cookies } from 'react-cookie';
import { handleAuthSSR } from '../utils/auth';

const serverUrl = 'http://localhost:3001';

// set up cookies
const cookies = new Cookies();

class Secret extends React.Component {

  onPingCall = async (e) => {
    const token = cookies.get('token')

    try {
      const res = await axios.get(serverUrl + '/api/ping', { headers: { 'Authorization': token } });
      console.log(res.data.msg);
    } catch (err) {
      console.log(err.response.data.msg);
    }
  }

  render() {
    return (

match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {

		if (error) {
			console.log('ERROR', error);
			// throw new Error(error)
			Raven.captureException(error)
			res.status(500).send(error.message);

		} else if (redirectLocation) {
			res.redirect(302, redirectLocation.pathname + redirectLocation.search);

		} else if (renderProps) {

			/**/
			reactCookie.plugToRequest(req, res)
			let startingState = defaultState
			try {
				startingState = getStateFromToken()
			} catch (err) {

			}

			const profileLanguageTag = startingState !== null &&
				typeof startingState !== 'undefined' &&
				typeof startingState.auth !== 'undefined' &&
				typeof startingState.auth.userData !== 'undefined' &&
				typeof startingState.auth.userData.language_tag ? startingState.auth.userData.language_tag : null

			req.Locale = getLocale(req, profileLanguageTag);

			// We are not authenticated

rehydrate(state) {
    this.options = state.options;
    this.lastVisit = state.lastVisit;
    this.isFirstTime = state.isFirstTime;
    this.version = state.version;

    // TODO: Don't call this everytime.
    if (reactCookie.load('isFirstTime') !== state.isFirstTime) {
      reactCookie.save('isFirstTime', state.isFirstTime);
    }

    if (reactCookie.load('version') !== state.version) {
      reactCookie.save('version', state.version.replace(/\"/g, '').replace(/\\/g, ''));
    }
  }

import { AUTH_USER } from './actions/types';

// Import stylesheets
import './public/stylesheets/base.scss';

// Initialize Google Analytics
ReactGA.initialize('UA-000000-01');

function logPageView() {
  ReactGA.pageview(window.location.pathname);
}

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

const token = cookie.load('token');

if (token) {
  // Update application state. User has token and is probably authenticated
  store.dispatch({ type: AUTH_USER });
}

ReactDOM.render(
  
    
  ,
  document.querySelector('.wrapper'));

rehydrate(state) {
    this.options = state.options;
    this.lastVisit = state.lastVisit;
    this.isFirstTime = state.isFirstTime;
    this.version = state.version;

    // TODO: Don't call this everytime.
    if (reactCookie.load('isFirstTime') !== state.isFirstTime) {
      reactCookie.save('isFirstTime', state.isFirstTime);
    }

    if (reactCookie.load('version') !== state.version) {
      reactCookie.save('version', state.version.replace(/\"/g, '').replace(/\\/g, ''));
    }
  }

dismissBanner(e) {
    if (e && e.preventDefault) e.preventDefault();

    this.setState({showBanner: false});

    // set cookie to keep the banner dismissed persistently 
    Cookie.save('showBanner', 'no');
  }

export function setOption(payload) {
  const options = cookie.load('options') || {}; // protect against first timers.

  Object.keys(payload).forEach((option) => {
    options[option] = payload[option];
  });
  cookie.save('options', JSON.stringify(options));

  return {
    type: SET_OPTION,
    payload
  };
}