React-router 多路由（React 组件）
Posted
技术标签:
【中文标题】React-router 多路由（React 组件）【英文标题】：React-router multiple routes (React components) 【发布时间】：2017-09-17 08:06:52 【问题描述】：下面是我处理每个请求的 routes.js - 这是用于服务器端渲染的 react - 我有以下 2 个文件 - 我现在得到 hello world
我的主要问题是 -
我在哪里处理其他路线？我在这部分感到困惑 - 如何使用静态 <!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!');
);
【问题讨论】：
【参考方案1】：您需要在基本组件中使用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>
【讨论】：
以上是关于React-router 多路由（React 组件）的主要内容，如果未能解决你的问题，请参考以下文章
在 react-router v4 中将自定义道具传递给路由器组件