2017-03-15 19 views
4

私はこのエラーを解決できません... 私はlocalhost:3000をリフレッシュするので、 そして、それは私にエラーを示しています。ルーティング、ユニバーサルアプリケーション(Nodejs、React)、エラー(0、_reactRouter.match)は関数ではありません

はTypeError:(0、_reactRouter.matchは)私は、 "反応し、ルータの" インストールされている機能

ではありません: "^ 4.0.0"

import Express from 'express'; 
import {RouterContext, match} from 'react-router'; 
import {renderToString } from 'react-dom/server'; 
import React from 'react'; 
import routes from './routes.js' 



var app = new Express(); 
app.set('view engine', 'ejs'); 
app.set('views',__dirname); 


////////////////////////////////////////////////////////////////////// 
app.get('*', (req, res) => { 
    match(
     { routes, location: req.url }, 
     (err, redirectLocation, renderProps) => { 

      if (err) { 
       return res.status(500).send(err.message); 
      } 

      if (redirectLocation) { 
       return res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
      } 

      var markup; 
      if (renderProps) { 
       // if the current route matched we have renderProps 
       markup = renderToString(<RouterContext {...renderProps}/>); 
      } else { 
       // otherwise we can render a 404 page 
       markup = renderToString(<NotFoundPage/>); 
       res.status(404); 
      } 

      // render the index template with the embedded React markup 
      return res.render('index', { markup }); 
     } 
    ); 
}); 
////////////////////////////////////////////////////////////////////////////////// 


var port = process.env.PORT || 3000; 
app.listen(port,()=>{ 
    console.log('Server is listening on port ' + port); 
}); 

答えて

3

反応ルータをv4より前に使用した場合、コードが正しく表示されますが、反応ルータv4では壊れたchangがありますサーバーレンダリングの方法を含めて、コードベース全体に分散します。 v4では、サーバレンダリング専用の新しいコンポーネント、StaticRouterがあります。

サーバーレンダリングのため、ここでのドキュメントを見てみましょう: https://reacttraining.com/react-router/web/guides/server-rendering

あなたはまだあなたがそれを持っているとして、あなたはバージョン4.テイクの下に反応し、ルータのバージョンを使用することができmatch機能を使用したい場合very similar question from yesterdayで私の答えを見て、あなたは他のOPと同じボイラープレート/例を使用している可能性があります。

+0

インストールされた反応ルータのDOMをインポートしたにもかかわらず、StaticRouterが定義されていないというエラーが表示されます しかし、ここで説明したようにしました(https://scotch.io/tutorials/react-on-the-server -for-beginners-build-a-universal-react-and-node-app)、サーバー側でのみ動作します。クライアント側では、Webページを開くと、生のファイルと辞書のみが表示されます。 myとscotchコードの主な違いはwebpack.config.jsファイルにあります。私のコードが正しく動作しないのはなぜですか? –

関連する問題