I have a server.js file that should get some data from the server and save it in an object called customP. To make things easier for now I'm playing around trying to pass a constant string along with the RouterContext renderProps:
server.js
markup = renderToString(<RouterContext {...renderProps} createElement={(Component, props) => {return <Component customP={"boaz"} {...props} />;}} />);
return res.render('index', {markup});
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vetevo dashboard</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="main"><%- markup -%></div>
<script src="/js/bundle.js"></script>
</body>
</html>
routes.js
const routes = (
<Route path="/dashboard" component={Layout}>
<IndexRoute foo="bar" component={DashboardPage}/>
<Route path="*" component={NotFoundPage}/>
</Route>
);
And finally the most important part: DashboardPage Component
constructor(props) {
super(props);
console.log(props.customP);
}
render() {
//console.log(this.props);
return (
<div className="dashboard">
<h2>This is the component: {this.props.customP}</h2>
<h1>SA</h1>
</div>
);
}
The weird thing is that the customP prop is shown for a millisecond and then disappears. Not only that - I get in the console.log in the constructor function the right value. I think that leads to the conclusion that there is another render happening or the render is crushing. I can't find the reason why, but componentDidMount() is also not responding.
Any help would be appreciated.
via BoazKG
No comments:
Post a Comment