这个ReactRouter.match（）实现有什么问题？

我试图通过快递从我的服务器提供反应。

我得到的错误，当我打本地主机：3000是：

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

这是server.js文件：

 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}]`); }); 

所以据我所知，我按照我在其他地方看到的方式导入它（例如， 这里 ）。

我错过了一些东西，我不知道下一步该猜测或想什么。 我究竟做错了什么？

PS – react-router是在4.0.0版本，文档匹配在这里

Answer 1

如果您在v4之前使用了反应路由器，则您的代码看起来是正确的，但是react-router v4在整个代码库中发生了重大更改，包括服务器呈现的方法。 在v4中，有一个专门用于服务器渲染的新组件 – StaticRouter 。

你的代码在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}]`); }); 

这是EbayTech的一篇非常好的注释文章，展示了如何使用StaticRouter（用于服务器）和BrowserRouter（用于客户端）