Created
November 28, 2015 18:08
-
-
Save doncams/0160093bbb1cb30af9a4 to your computer and use it in GitHub Desktop.
Cannot render from server
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { IndexRoute, Route, Link } from 'react-router'; | |
| const App = React.createClass({ | |
| render() { | |
| return ( | |
| <div> | |
| <h1>App</h1> | |
| <ul> | |
| <li><Link to="/about">About</Link></li> | |
| <li><Link to="/inbox">Inbox</Link></li> | |
| </ul> | |
| {this.props.children} | |
| </div> | |
| ) | |
| } | |
| }) | |
| const About = React.createClass({ | |
| render() { | |
| return <h3>About</h3> | |
| } | |
| }) | |
| const Inbox = React.createClass({ | |
| render() { | |
| return ( | |
| <div> | |
| <h2>Inbox</h2> | |
| {this.props.children || "Welcome to your Inbox"} | |
| </div> | |
| ) | |
| } | |
| }) | |
| const Message = React.createClass({ | |
| render() { | |
| return <h3>Message {this.props.params.id}</h3> | |
| } | |
| }) | |
| const routes = ( | |
| <Route path="/" component={App}> | |
| <Route path="about" component={About} /> | |
| <Route path="inbox" component={Inbox}> | |
| <Route path="messages/:id" component={Message} /> | |
| </Route> | |
| </Route> | |
| ); | |
| export default routes; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import _ from 'lodash'; | |
| import path from 'path'; | |
| import express from 'express'; | |
| import {renderToString} from 'react-dom/server'; | |
| import {match, RoutingContext} from 'react-router'; | |
| import React from 'react'; | |
| import config from './configs/config.js'; | |
| import routes from './components/Routes.js'; | |
| // import app from './app.js'; | |
| let server = express(); | |
| server = require('./configs/express.js')(server); | |
| if (process.env.NODE_ENV === 'development') { | |
| server.use(express.static(path.resolve('./build/public'))); | |
| } else { | |
| server.use(express.static(path.resolve('./dist/public'))); | |
| } | |
| server.use((req, res, next) => { | |
| // const routes = app.getComponent(); | |
| // console.log(renderToString(<Router routes={routes}></Router>)); | |
| match({routes: routes, location: req.url}, (error, redirectLocation, renderProps) => { | |
| console.log(error, redirectLocation, renderProps); | |
| console.log(renderToString(<RoutingContext {...renderProps}/>)); | |
| }); | |
| res.render('layout', { | |
| appContainer: _.startCase(config.appName + ' container').replace(' ', '') | |
| }); | |
| }); | |
| server.listen(config.port); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment