Tuesday 14 March 2017

What's wrong with this ReactRouter.match() implementation?

I'm trying to serve up React from my server via express.

The error I'm getting, though, when I hit localhost:3000 is:

TypeError: (0 , _reactRouter.match) is not a function
    at /Users/chris/code/affordance/app/server.js:20:3

Here's the server.js file that does that:

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import NotFoundPage from './components/NotFoundPage';

// Initialize the express server, and tell it to use ejs
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Tell express where the static assets are
app.use(Express.static(path.join(__dirname, 'static')));

app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {

      if (err) {
        return res.status(500).send(err.message);
      }

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

      let markup;
      if (renderProps) {
        markup = renderToString(<RouterContext {...renderProps}/>);
      } else {
        markup = renderToString(<NotFoundPage/>);
        res.status(404);
      }

      return res.render('index', { markup });
    }
  );
});

const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  console.info(`Server running on http://localhost:${port} [${env}]`);
});

So as far as I can tell, I'm importing it the way I see it used elsewhere (for instance, here).

I'm missing something, and I don't know what to guess or think next. What am I doing wrong?

ps - react-router is at version 4.0.0, docs for match are here



via dislikesAppleCores

No comments:

Post a Comment