服務器端反應路由器不會渲染我的路由

Question

我與版本1.0.0-rc1和我的匹配函數將不會正確呈現我的路線。

這是我的服務器

import express from 'express'; 
import React from 'react'; 
import createLocation from 'history/lib/createLocation' 
import Router, { match, RoutingContext } from 'react-router'; 
import createRoutes from './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; 

這是我的路線

import React from 'react'; 
import { Route } from 'react-router'; 
import Application from './components/Application.react'; 
import Home from './components/Home.react'; 

export default function() { 
    return (
    <Route path="/" component={Application}> 
     <Route path="home" component={Home} /> 
    </Route> 
); 
} 

我該怎麼辦錯了呢？當我要求回家時，它應該呈現<h1>Home</h1>而不是<h1>Application</h1>。就這麼簡單。

我此基礎上本https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ServerRendering.md

謝謝

Answer 1

您正在使用子路徑。這意味着，當您首次訪問「/ home」時，應用程序已呈現，然後通過應用程序組件內部的this.props.children注入並可使用子主頁。 爲一個簡單的例子見here：

試試這個（不嵌套）：

<Route path="/" component={Application}> 
<Route path="/home" component={Home} /> 

如果要呈現在家庭成分使用

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