javascript - React Router.match 在尝试服务器渲染 React 元素时没有回调参数

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: {} } }

它以 typescript 文件开始，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

您收到未定义值，因为没有任何内容匹配，这是 404ing。

没有任何匹配的原因是因为您混合了 es5 和 es6 模块。尝试将 routes.default 传递到 match() 中。