服务器上的React-router始终呈现根路由

时间:2016-11-04 10:35:54

标签: node.js express reactjs react-router server-rendering

我已经在这个问题上花了半天时间,但却找不到问题所在。我在服务器上使用react-router。但是对于每个路由,它呈现相同的组件(来自根路由的组件)。

这是我的服务器:

//routes
import routes from "../shared/routes";
app.get('*', (request, response) => {
    match({ routes: routes, location: request.url }, (err, redirect, props) => {
        if (err) {
            response.status(500).send(err.message)
        } else if (redirect) {
            response.status(302).redirect(redirect.pathname + redirect.search)
        } else if (props) {
            console.log('Rendering '+JSON.stringify(props));
            const appHtml = ReactDOMServer.renderToString(<RouterContext {...props}/>);
            response.render('app', {app: appHtml});
        } else {
            response.status(404).send('Not Found')
        }
    });
});

这是我的路线:

export default (
    <Route component={AppHandler} path="/">
        <IndexRoute component={AppHandler}/>
        <Route component={AboutHandler} path="about" />
    </Route>
);

其他观察:

  • 正确区分不存在的路线,例如。当我输入 / blahblah在浏览器中我得到了404
  • 当我把AboutHandler作为 根路由的组件,显示纠正
  • 我也试过&#34; / about&#34;作为路径路径,而不仅仅是&#34;关于&#34;
  • 以下是道具{"routes":[{"path":"/","indexRoute":{},"childRoutes":[{"path":"about"}]},{"path":"about"}],"params":{},"location":{"pathname":"/about","search":"","hash":"","action":"POP","key":"bqces8","query":{}},"components":[null,null],"router":{"location":{"pathname":"/about","search":"","hash":"","action":"POP","key":"bqces8","query":{}},"params":{},"routes":[{"path":"/","indexRoute":{},"childRoutes":[{"path":"about"}]},{"path":"about"}]},"matchContext":{"transitionManager":{},"router":{"location":{"pathname":"/about","search":"","hash":"","action":"POP","key":"bqces8","query":{}},"params":{},"routes":[{"path":"/","indexRoute":{},"childRoutes":[{"path":"about"}]},{"path":"about"}]}}}
  • 的内容

更新:

AppHandler和AboutHandler是使用webpack构建的。它们的导入方式如下:

import AppHandler from '../../build/app';
import AboutHandler from '../../build/about';

以下是两个文件的相关部分:

app.js:

var App = function (_Component) {
    _inherits(App, _Component);

    function App() {
        _classCallCheck(this, App);

        return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
    }

    _createClass(App, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                'App root'
            );
        }
    }]);

    return App;
}(_react.Component);

exports.default = App;

并且about.js:

var About = function (_Component) {
    _inherits(About, _Component);

    function About() {
        _classCallCheck(this, About);

        return _possibleConstructorReturn(this, (About.__proto__ || Object.getPrototypeOf(About)).apply(this, arguments));
    }

    _createClass(About, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                'About'
            );
        }
    }]);

    return About;
}(_react.Component);

exports.default = About;

1 个答案:

答案 0 :(得分:0)

我在react-router中错误地嵌套了路由,并错过了AppHandler中的DOMNode::textContent