2016-03-12 13 views
3

我有一个expressjs应用程序与下面的代码,我想要做的是呈现一个名为你好反应组件与“/”的请求。在Hello组件中,我使用了两个react-router链接,但是这两个链接并不呈现href属性。react-router链接不呈现href属性与服务器端渲染?

我在这里使用反应路由器2

Server.js文件

var express = require("express"); 
var app = express(); 
var React = require("react"); 
var ReactDOM = require("react-dom/server"); 

var Hello = React.createFactory(require("./js/components/Hello")); 
// The above is a reference to pre-compiled Hello.jsx to Hello.js using babel 

app.set("view engine", "ejs"); 
app.set("views", "./views"); 

app.use(express.static("./public")); 

app.get("/", function (req, res) { 
    res.render("Home",{data:ReactDOM.renderToString(Hello())}); 
}); 


app.listen(app.get("port"), function() { 
    console.log("server started on port " + app.get("port")); 
}); 

Hello.jsx文件

var React = require("react"); 
var Link = require("react-router/lib/Link"); 

var Hello = React.createClass({ 
    callMe:function(){ 
     alert("Hurray"); 
    }, 
    componentWillMount:function(){ 
     console.log("componentWillMount fired"); 
    }, 
    render:function(){ 
    // console.log(this); 
     return(
      <div> 
       <h2 onClick={this.callMe}>Hello Boom Boom {this.props.name}</h2> 
       <Link to="/">Home</Link> 
       <Link to="/about">About</Link> 
       // above two Links rendering anchor tags without href attribute 
      </div> 
     ); 
    } 
}); 


module.exports = Hello; 

Home.ejs文件

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

</head> 
<body> 
    <h2>Welcome to home page</h2> 
    <div id="container"> 
     <%- data %> 
    </div> 

</body> 
</html> 

in browser output

+0

你可以用代码替换图像吗?人们尝试重建复制和粘贴代码的问题比从图像中读取更容易。 –

回答

3

请咨询做出反应路由器服务器渲染指南:https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

你需要使你的组件在一个合适的路由上下文<Link>生成URL。

+0

感谢您提供服务器渲染指南,但我几乎无法理解这一点。你能给我推荐一些使用反应路由器2的示例代码吗? – manas

+0

服务器渲染示例_is_是使用Express执行操作的典型示例。你需要在服务器上使用'match()'助手并呈现''。 – taion

+1

@taion您的链接已损坏 – mattnedrich

-1

我刚刚有同样的问题,我错过的东西是围绕<RouterContext><Link>组件在不在<Router>或适当的react-router环境内时似乎具有空的href属性。我改进了SSR代码中的路由(我在做一个weird partial solution)并且链接开始出现。