node.js - Server side react-router won't render my routes -


i'm version 1.0.0-rc1 , match function won't render route correctly.

this server

import express 'express'; import react 'react'; import createlocation 'history/lib/createlocation' import router, { match, routingcontext } 'react-router'; import createroutes './create-routes';  const app = express(); const routes = createroutes();  app.use((req, res) => {   let location = createlocation(req.url);    match({ routes, location }, (error, redirectlocation, renderprops) => {     if (redirectlocation)       res.status(301).redirect(redirectlocation.pathname + redirectlocation.search)     else if (error)       res.status(500).send(error.message)     else if (renderprops == null)       res.status(404).send('not found')     else       res.send(react.rendertostring(<routingcontext {...renderprops}/>))   }); });  export default app; 

this routes

import react 'react'; import { route } 'react-router'; import application './components/application.react'; import home './components/home.react';  export default function() {   return (     <route path="/" component={application}>       <route path="home" component={home} />     </route>   ); } 

what do wrong in this? when ask /home, should render <h1>home</h1> instead of <h1>application</h1>. simple that.

i based on https://github.com/rackt/react-router/blob/master/docs/guides/advanced/serverrendering.md

thank you

you using subroutes. means, when go "/home" first application rendered, child home injected , available via this.props.children inside of application component. see here simple example:

try (not nested):

<route path="/" component={application}> <route path="/home" component={home} /> 

if want render application component around home component use

render() {     return (         <div>             <h1>application</h1>             { this.props.children }         </div>     ); } 

Comments