I can't fix this error... I start server, everything is ok, since I refresh localhost:3000 Then it show me an error:

TypeError: (0 , _reactRouter.match) is not a function

I have installed "react-router": "^4.0.0"

import Express from 'express';
import {RouterContext, match} from 'react-router';
import {renderToString } from 'react-dom/server';
import React from 'react';
import routes from './routes.js'



var app = new Express();
app.set('view engine', 'ejs');
app.set('views',__dirname);


//////////////////////////////////////////////////////////////////////
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);
            }

            var markup;
            if (renderProps) {
                // if the current route matched we have renderProps
                markup = renderToString(<RouterContext {...renderProps}/>);
            } else {
                // otherwise we can render a 404 page
                markup = renderToString(<NotFoundPage/>);
                res.status(404);
            }

            // render the index template with the embedded React markup
            return res.render('index', { markup });
        }
    );
});
//////////////////////////////////////////////////////////////////////////////////


var port = process.env.PORT || 3000;
app.listen(port, ()=>{
    console.log('Server is listening on port ' + port );
});

I can't fix this error... I start server, everything is ok, since I refresh localhost:3000 Then it show me an error:

TypeError: (0 , _reactRouter.match) is not a function

I have installed "react-router": "^4.0.0"

import Express from 'express';
import {RouterContext, match} from 'react-router';
import {renderToString } from 'react-dom/server';
import React from 'react';
import routes from './routes.js'



var app = new Express();
app.set('view engine', 'ejs');
app.set('views',__dirname);


//////////////////////////////////////////////////////////////////////
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);
            }

            var markup;
            if (renderProps) {
                // if the current route matched we have renderProps
                markup = renderToString(<RouterContext {...renderProps}/>);
            } else {
                // otherwise we can render a 404 page
                markup = renderToString(<NotFoundPage/>);
                res.status(404);
            }

            // render the index template with the embedded React markup
            return res.render('index', { markup });
        }
    );
});
//////////////////////////////////////////////////////////////////////////////////


var port = process.env.PORT || 3000;
app.listen(port, ()=>{
    console.log('Server is listening on port ' + port );
});

• javascript
• reactjs
• react-router
• isomorphic-javascript

1 Answer 1

Your code looks correct if you used react router prior to v4, but react-router v4 has breaking changes throughout the codebase, including the method for server rendering. In v4, there is a new ponent specifically for server rendering - StaticRouter.

Take a look at the documentation here for Server rendering: https://reacttraining./react-router/web/guides/server-rendering

If you would still like to use the match function as you have it, you could use a version of react-router below version 4. Take a look at my answer on a very similar question from yesterday, you might be using the same boilerplate/example as the other OP.