react-router: TypeError: Cannot read property 'query' of null - react-router/node_modules/history/lib/useQueries.js:43:22

Hi,

We tried to migrate our app from react-router 0.13 to 1.0 and we got some big errors.

{“error”:“TypeError: Cannot read property ‘query’ of null\n at …/node_modules/react-router/node_modules/history/lib/useQueries.js:43:22\n at …/node_modules/react-router/lib/useRoutes.js:252:15\n at …/node_modules/react-router/lib/useRoutes.js:88:15\n at …/node_modules/react-router/lib/useRoutes.js:124:15\n at done (…/node_modules/react-router/lib/AsyncUtils.js:49:19)\n at …/node_modules/react-router/lib/AsyncUtils.js:55:7\n at getComponentsForRoute (…/node_modules/react-router/lib/getComponents.js:9:5)\n at …/node_modules/react-router/lib/getComponents.js:28:5\n at …/node_modules/react-router/lib/AsyncUtils.js:54:5\n at Array.forEach (native)”}

We added the History module, but it looks like the react-router use his own dependencies.

It’s quite an easy isomorphic router we use;

export default function isomorphicRouter(location, history, store) {
  let routes = createRoutes(store);

  return new Promise((resolve, reject) => {
    match({ routes, location }, (error, redirectLocation, renderProps) => {

      let component;

      if (error) {
        return reject(error);
      }

      if (redirectLocation) {
        return resolve({
          redirectLocation,
          isRedirect: true
        });
      }

      if (history) {
        renderProps.history = history;
      }

      component = (
        <Provider store={store} key="provider">
          {() => <Router {...renderProps} children={routes} />}
        </Provider>
      );

      return resolve({
        component,
        isRedirect: false
      });
    });
  });
}

And we use it in this server.js file;

import express from 'express';
import cookieParser from 'cookie-parser';
import bodyParser from 'body-parser';
import csrf from 'csurf';
import createStore from './redux/create';
import ApiClient from './api-client';
import createLocation from 'history/lib/createLocation';
import React from 'react';
import Html from './html';
import PrettyError from 'pretty-error';
import isomorphicRouter from './isomorphic-router';
import {API_PORT} from './utils/consts';
import httpProxy from 'http-proxy';

let server = express();
let port = process.env.PORT || 4000;
let env = server.get('env');
let csrfProtection = csrf({
  cookie: true
});
let pretty = new PrettyError();

let proxy = httpProxy.createProxyServer({
  target: 'http://localhost:' + API_PORT
});

proxy.on('error', (error) => {
  log('proxy error', error);
});

server.use('/', express.static(__dirname + '/../build'));
server.use(cookieParser());

// Proxy to the API service gateway.
server.use('/api', (req, res) => {
  proxy.web(req, res);
});

server.use(bodyParser.json());

server.use(csrfProtection, (req, res) => {
  let client = new ApiClient(req);
  let store = createStore(client);
  let location = createLocation(req.url);

  if (IS_SSR_DISABLED) {
    res.send('<!DOCTYPE html>\n' + React.renderToString(<Html component={<div />} store={store} />));
  } else {
    isomorphicRouter(location, undefined, store)
      .then(({component, redirectLocation, isRedirect}) => {
        if (isRedirect) {
          res.redirect(redirectLocation.pathname);

          return;
        }

        res.send('<!DOCTYPE html>\n' + React.renderToString(<Html component={component} store={store} />));
      })
      .catch((error) => {
        if (error.redirect) {
          res.redirect(error.redirect);

          return;
        }

        log('ROUTER ERROR:', pretty.render(error));
        res.status(500).send({
          error: error.stack
        });
      });
  }
});

server.listen(port, () => {
  if (process.send) {
    process.send('online');
  } else {
    log('listening on http://localhost:' + port + ' in ' + env + ' mode');
  }
});

export default server;

It it the let location = createLocation(req.url); who is not initialized correctly? I’m very lost in migrating the new changes. Thank you for your help!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 21 (3 by maintainers)

Most upvoted comments

I recently ran into the same issue during migration. It wasn’t caused by any missing modules or dependencies, but because of the deprecation of pushState.

Previously we’d write the programmatic route changes like this:

History.pushState(null, '/path');

Now they have to done as:

History.push('/path');

A poorly formed href string (or the lack of) in the push method causes this error to be thrown. After some refactoring the error seems to have gone away.

+10

sophiabersani on Feb 21, 2016

Same error for me, it was also the Link having an invalid ‘To’ property.

<li><Link to={ s.slug }>{ s.title }</Link></li>

In this case s.slug was undefined. Could improve the error?

adover on Aug 26, 2016

I was having the same issue and figured out that the link I was creating had an invalid to property.

var permalink = null
<Link to={ permalink }>This will throw "Cannot read property 'query' of null"</Link>

IMHO, react-router should consider “” as default if to is falsy.

endel on May 2, 2016