Что не так с этим реактором?реализация match ()?
Я пытаюсь подать React с моего сервера через express.
Ошибка, которую я получаю, когда я нажимаю localhost: 3000:
TypeError: (0 , _reactRouter.match) is not a function
at /Users/chris/code/affordance/app/server.js:20:3
Вот сервер.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}]`);
});
Так что, насколько я могу судить, я импортирую его так, как я вижу, что он используется в другом месте (например, здесь).
Я что-то упускаю из виду и не знаю, что думать дальше. Что я делаю не так?ПС - реагировать-маршрутизатор имеет версию 4.0.0, документы для матча здесь
1 ответ:
Ваш код выглядит корректным, если вы использовали react router до 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(для клиента)