サーバ上のReact-routerは常にルートルートをレンダリングします

Question

私はすでにこの問題に関して半日を過ごしましたが、何が間違っているかを見つけることはできません。私はサーバー上の反応ルータを使用します。しかし、すべてのルートに対して、同じコンポーネント（ルートルートからのコンポーネント）をレンダリングします。

//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を入力したとき、私はルートルートの コンポーネントとしてAboutHandlerを置くとき、私は

• 404を持って、それはcorrectylは、「/約」
• は、私も試してみましたが表示され
の「約」の代わりのみのルート・パスとしてここ
• は、私が小道具{"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"}]}}}で得るものです

UPDATE：

AppHandlerとAboutHandlerはWebPACKのを使用して構築されています。彼らは同様にインポートされます。

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：ここ

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

は、両方のファイルの関連する部分です

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; 

Answer 1

私は、ネストされたmisundrestood反応ルータのルートとAppHandlerの{this.props.children}が見つかりませんでした。