我正在使用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
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');
// 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');
}
});
});
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>
);
import React from 'react';
export default class AppTemplate extends React.Component {
constructor() {
super();
}
render() {
return (
<html>
<head>
</head>
<body>
<div id='app' />
</body>
</html>
);
}
};
几周前我遇到了麻烦,但是以某种方式使它起作用了,以下是我做过的一些事情,它们可能会或可能不会影响您的实施:
而不是使用express.get,我使用了没有路径说明的express.use,这意味着react-router的行为更像是中间件,而不是请求处理程序。
在要匹配的第一个参数中,我的对象键是“ routes”而不是“ Routes”
我也使用“历史记录”模块,因此我的位置是使用createLocation(req.originalUrl)创建的-createLocation来自“历史记录”。
尝试尝试一下这些内容,否则我也可以发布经过修改的代码版本。
这是#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 }