使用React-Router的服务器端渲染不起作用

问题描述 投票:1回答:1

我正在使用express,我想在服务器端做一些基本的路由。 目前,我只是在尝试设置路由器以执行任何操作 。 现在,它总是返回404。

我相信我已经按照https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ServerRendering.md上列出的说明进行操作。

它几乎是您获得的最基本的东西:一个快递服务器,它路由来自上面列出的链接的代码所处理的每个请求,以及一个ReactRouter,它将所有东西都路由到AppTemplate组件。

肯定要进入routes.js中的回调,因为它会为每个请求返回“未找到”。

我怀疑这很重要,但是我正在通过iisnode在IIS中运行它。 我一直在调试时遇到麻烦,这是我从express-react-views切换到通过<Router>进行路由的原因之一。

让我知道我还能为您提供哪些其他信息。

文件结构:

server/
-- server.js // just calls babel-register and express-app.js
-- express-app.js
-- router.js

server/views/
-- app-template.js
-- routes.js

服务器/快递,app.js

import Express from 'express';
import BodyParser from 'body-parser';
import CookieParser from 'cookie-parser';

let app = new Express();
export default app;

app.enable('trust proxy');

app.use('/public', Express.static('../dist'));

app.use(BodyParser.urlencoded({ extended: true }));
app.use(BodyParser.json());
app.use(CookieParser());

// some rest API code here, currently commented out

app.set('tokenSecret', process.env.tokenSecret);

require('./router');

服务器/ router.js

// copied right from https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ServerRendering.md.
import { renderToString } from 'react-dom/server';
import { match, RouterContext} from 'react-router';

import app from './express-app';
import Routes from './views/routes';

app.get('/*', (req, res) => {
    match({ Routes, location: req.originalUrl }, (error, redirectLocation, renderProps) => {
        if (error) {
            res.status(500).send(error.message);
        } else if (redirectLocation) {
            res.redirect(302, redirectLocation.pathname + redirectLocation.search);
        } else if (renderProps) {
            res.status(200).send(renderToString(<RouterContext {...renderProps} />));
        } else {
            res.status(404).send('Not found');
        }
    });
});

服务器/视图/ routes.js

import React from 'react';
import {Router, Route, IndexRoute} from 'react-router';

import AppTemplate from './app-template';

export default (
    <Router>
        <Route path='/' component={AppTemplate}>
        </Route>
    </Router>
);

服务器/视图/ APP-template.js

import React from 'react';

export default class AppTemplate extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <html>
                <head>
                </head>
                <body>
                    <div id='app' />
                </body>
            </html>
        );
    }
};
react-router
1个回答
2
投票

几周前我遇到了麻烦,但是以某种方式使它起作用了,以下是我做过的一些事情,它们可能会或可能不会影响您的实施:

  1. 而不是使用express.get,我使用了没有路径说明的express.use,这意味着react-router的行为更像是中间件,而不是请求处理程序。

  2. 在要匹配的第一个参数中,我的对象键是“ routes”而不是“ Routes”

  3. 我也使用“历史记录”模块,因此我的位置是使用createLocation(req.originalUrl)创建的-createLocation来自“历史记录”。

尝试尝试一下这些内容,否则我也可以发布经过修改的代码版本。

OP的注释:

这是#2。 babel语法{ Routes, location: req.url }将对象扩展为具有Routes的键,并且match()期望该键为routes 。 可以通过以下方法解决此问题

import routes from './views/routes';
...
{ routes, location: req.url }

根据建议,或

import Routes from './views/routes';
...
{ routes: Routes, location: req.url }
© www.soinside.com 2019 - 2024. All rights reserved.