Question

我有一个带有以下代码的expressjs应用程序，我想要做的是使用“/”请求呈现一个名为 Hello 的反应组件。在Hello组件中我使用两个react-router链接，但这两个链接不会呈现href属性。

我在这里使用react-router 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>

Answer 1

请参阅React Router服务器渲染指南：https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

您需要在<Link>的适当路由上下文中呈现您的组件以生成网址。

Answer 2

我遇到了同样的问题，而我所缺少的是周围的<RouterContext>。 <Link>组件在href或适当的<Router>环境中时似乎具有空的react-router属性。我改进了SSR代码中的路由（我正在做weird partial solution）并且链接开始出现。

react-router链接不会使用服务器端呈现呈现href属性？

2 个答案: