gpt4 book ai didi

node.js - 这个 ReactRouter.match() 实现有什么问题?

转载 作者:搜寻专家 更新时间:2023-10-31 23:07:55 26 4
gpt4 key购买 nike

我正在尝试通过 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,匹配文档为 here

最佳答案

如果您在 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}]`);
});

Here是 EbayTech 的一篇非常好的带注释的文章,展示了如何使用 StaticRouter(用于服务器)和 BrowserRouter(用于客户端)设置应用程序

关于node.js - 这个 ReactRouter.match() 实现有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42797543/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com