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

小编典典

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

reactjs

我正在尝试通过express从我的服务器提供React服务。

我遇到localhost：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}]`);
});

据我所知，我正在将其导入的方式与其他地方（例如here）的使用方式相同。

我错过了一些东西，我不知道接下来该怎么猜。我究竟做错了什么？

ps-react-router版本为4.0.0，匹配文档在这里

阅读 321

2020-07-22

共1个答案

小编典典

如果您在v4之前使用了react router，那么您的代码看起来是正确的，但是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（用于客户端）设置应用程序

2020-07-22