服务器端反应路由器不会呈现我的路线
我与版本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> ); }
我在这做错了什么? 当我问/ home时,它应该呈现<h1>Home</h1>
而不是<h1>Application</h1>
。 就这么简单。
我基于这个https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ServerRendering.md
谢谢
您正在使用子路由。 这意味着,当你首先进入“/ home”时,应用程序被渲染,然后通过应用程序组件内的this.props.children
注入和使用子Home。 这里看一个简单的例子:
试试这个(不嵌套):
<Route path="/" component={Application}> <Route path="/home" component={Home} />
如果你想渲染你的应用程序组件围绕Home组件使用
render() { return ( <div> <h1>Application</h1> { this.props.children } </div> ); }
- 如何在Node.js Express应用程序中呈现预编译的Jade(Pug)模板?
- Node / Express JS身份validation:除了Passport JS以外还有其他什么?
- ReactJS webapp中的业务逻辑
- Angular Universal + Express Server花了很长时间才得到第一个响应
- 无法在Express中呈现swig模板
- 不能确定req.body.name的值 – express节点js
- 尝试访问节点js中的req.user属性时,无法读取未定义的属性“用户名”
- 玉中的variables中的长string
- 如何在node.js / express中testing由csrf保护的端点