Question

我已尝试关注this guide和this question，但在ReactRouter.match被触发时，所有回调参数都未定义。

这是我的服务器：

var app = new (require('express'))()
var port = 3000

var ReactDomServer = require('react-dom/server');
var ReactRouter = require('react-router');
var routes = require('./es6/routes.js');

app.use(function(req, res) {
    console.log(req.url);
    ReactRouter.match({ routes: routes, location: req.url }, function(error, redirectLocation, renderProps) {
        console.log('error', error); // undefined
        console.log('erredirectLocationror', redirectLocation); // undefined
        console.log('renderProps', renderProps); // undefined
    });
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

与评论结果一样，error，redirectLocation和renderProps都记录为undefined。

记录routes变量开始：

{ default: 
   { '$$typeof': Symbol(react.element),
     type: 
      { [Function]
        displayName: 'Route',
        createRouteFromReactElement: [Function: createRouteFromReactElement],
        propTypes: [Object] },
     key: null,
     ref: null,
     props: { path: '/', component: [Function: App], children: [Object] },
     _owner: null,
     _store: {} } }

它以打字稿文件 routes.tsx ：

开头

import * as React from 'react'
import { Route } from 'react-router'
import App from './containers/app';
import Home from './containers/home';

export default (
    <Route path='/' component={App}>
        <Route path='/home' component={Home} />
    </Route>
)

编译为 es6 / routes.js

"use strict";
const React = require('react');
const react_router_1 = require('react-router');
const app_1 = require('./containers/app');
const home_1 = require('./containers/home');
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = (React.createElement(react_router_1.Route, {path: '/', component: app_1.default}, React.createElement(react_router_1.Route, {path: '/home', component: home_1.default})));
//# sourceMappingURL=routes.js.map

我错过了什么？

Answer 1

您获得了undefined个值，因为没有任何匹配，它是404。

没有匹配的原因是因为你正在混合es5和es6模块。尝试将routes.default传递给match（）。

尝试服务器渲染反应元素时，ReactRouter.match没有回调参数

1 个答案: