服务器上的React-router总是呈现根路由

我已经在这个问题上花了半天的时间，并且找不到问题所在。我在服务器上使用react-router。但是对于每一个路由，它都呈现相同的组件（来自根路由的组件）。服务器上的React-router总是呈现根路由

这里是我的服务器：

//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我得到了404
当我把AboutHandler作为组件根路径，它是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建。他们中导入的：

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;

来源

2016-11-04 ElMent

你可以发布你的appHandler组件代码 –

@ShubhamKhatri：感谢评论，我已经添加了相关部分的请求文件 – ElMent

我misundrestood嵌套在反应路由器中的路由，并在AppHandler中错过了{this.props.children}。

来源

2016-11-07 14:24:06 ElMent

服务器上的React-router总是呈现根路由

回答

相关问题