서버의 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이 웹팩를 사용하여 구축된다. 두 파일의

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

다음

입니다 관련 부분 :

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 :

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}이 누락되었습니다.