[英]React-router multiple routes (React components)
以下是我的route.js,它处理每个请求-这是用于react中的服务器端渲染-我有以下2个文件-我现在得到了问候世界我遇到的主要问题是- 在哪里处理其他路由? 我在这部分感到困惑-如何使用静态<!Doctype><head><title></head>
制作base.js-但根据请求的URL使用/ about和/ other等不同的组件? 请帮我解决这个问题-对我来说,这似乎是一个很大的障碍-已经尝试了许多示例,但是一切似乎都非常复杂-
routes.js
var express = require('express');
var router = express.Router();
import React, { Component } from 'react';
import ReactDOMServer from 'react-dom/server';
var ReactRouter = require('react-router');
import { renderToString } from 'react-dom/server';
router.get('*', function(request, response) {
ReactRouter.match({
routes: (
<ReactRouter.Router history={ReactRouter.browserHistory}>
<ReactRouter.Route path='/' component={require('./src/Components/layout/base')}>
</ReactRouter.Route>
</ReactRouter.Router>
),
location: request.url
}, function(error, redirectLocation, renderProps) {
if (renderProps) {
var html = ReactDOMServer.renderToString(
<ReactRouter.RouterContext {...renderProps} />
);
response.send(html);
} else {
response.status(404).send('Not Found');
}
});
});
module.exports = router;
base.js
var React = require('react');
module.exports = React.createClass({
render: function() {
return React.createElement('h1', null, 'Hello World!');
}
});
您需要在基本组件中使用{this.props.children}
。 这是一个例子:
import Header from './Header';
import React from 'react';
class Base extends React.Component {
render() {
return (
<div>
<Header />
<div>
{this.props.children}
</div>
</div>
);
}
}
export default Base;
然后,您可以在已有的基本路由内创建一个子路由:
<ReactRouter.Route path='/' component={require('./src/Components/layout/base')}>
<ReactRouter.Route path='/awesome-page' component={require('./src/Components/layout/awesome-page')}>
</ReactRouter.Route>
</ReactRouter.Route>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.