What happened to this ReactRouter.match () implementation?

Question

I am trying to execute React from my server using express.

The error I get, however, when I click localhost: 3000:

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

Here is the server.js file that does this:

 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 import it as I see it, in another place (for example, here ).

Something is missing me, and I do not know what to guess or think. What am I doing wrong?

ps - response-router is in version 4.0.0, docs to match here

Answer 1

Your code looks correct if you used a reaction router prior to version v4, but the reaction router v4 has violations in the entire code base, including the server rendering method. In version 4 there is a new component for creating a server - StaticRouter .

Your code should look something like this: v4:

 import path from "path"; import { Server } from "http"; import Express from "express"; import React from "react"; import { renderToString } from "react-dom/server"; import { StaticRouter } from "react-router"; import App from "./app"; 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) => { // This context object contains the results of the render const context = {}; const html = renderToString( <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> ); res.status(200).send(html); }); 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}]`); }); 

Here is a very good annotated EbayTech article showing how to configure an application using StaticRouter (for server) and BrowserRouter (for client)