反応ルータの一致は、es6をバベルで蒸した後には機能しません

Question

babel-node server.jsを実行するとすべてうまく動作しますが、私のes6コードをbabelで作成して、私はいつも404エラーメッセージを返します。私はIsomorphic/Universalサーバーでこれを使用しています。

私はconsole.logにES6バージョンとtranspiledバージョンの値は同じものを見ています。私server.jsで

実際ES6・マッチ・コード

let history = useRouterHistory(useQueries(createMemoryHistory))() 
    let routes = createRoutes(history) 
    let location = history.createLocation(req.url) 

    match({ all_routes, location }, (error, redirectLocation, renderProps) => { 
     if (redirectLocation) { 
      res.redirect(301, redirectLocation.pathname + redirectLocation.search) 
     } else if (error) { 
      res.status(500).send(error.message) 
     } else if (renderProps == null) { 
      res.status(404).send('Not found') 
     } else { 

私.babelrcは、次のようになります。私はCONSOLE.LOGとき

const routes = function(){ 
    return (
     <Router history={browserHistory}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Home} /> 
       <Route path="contact" component={Contact} /> 
       <Route path="login"  component={Login} /> 
       <Route path="*"   component={NotFound} /> 
      </Route> 
     </Router> 
    ) 
} 

：

{ 
    "presets": ["es2015", 'stage-2',"react"], 
    "plugins": [ "transform-object-rest-spread","transform-react-jsx"] 
} 

マイroutesファイル経路は次のようになります。

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

Answer 1

createRoutesはroutesオブジェクトを想定していますが、historyインスタンスを渡しています。 routes機能のうち、<Route>をサーバにインポートする方法で抽出する必要があります。

// routes.js 
export const routes = (
    <Route path="/" component={App}> 
    <IndexRoute component={Home} /> 
    <Route path="contact" component={Contact} /> 
    <Route path="login"  component={Login} /> 
    <Route path="*"   component={NotFound} /> 
    </Route> 
) 

次に、あなたのように自分のルータを定義します

import { routes } from './routes' 

function router() { 
    return (
    <Router history={browserHistor}> 
     {routes} 
    </Router> 
) 
} 

とサーバ上の、あなたがルートをインポートでしょうし、あなたドン場合matchはあなたのためにこれを行いますが、あなたは（createRoutesに渡すことができます't）。私はあなたが示唆したようにコードは次のようであることを簡素化するときに、問題がまだ存在する

import { routes } from './routes' 

function handler(req, res) { 
    match({ routes, req.url }), function(...) { 
    // ... 
    }) 
}