我正在使用 Pay pals React 引擎。我有一个布局组件，它调用我的导航组件。由于导航是全局的，我想将它放在布局中，两者似乎都是在服务器端渲染的。当我想在 Nav 中使用 React Routers Link 功能时，问题就出现了。
布局:
var React = require('react');
var Nav = require('../../server/components/Nav.jsx');
module.exports = React.createClass({
componentDidMount: function(){
try{Typekit.load({ async: true });}catch(e){}
},
render: function render() {
return (
<html>
<head>
<meta charSet='utf-8' />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
{this.props.title}
</title>
</head>
<body>
{ /*trying to pass router as a prop as a useless attempt to make this work*/ }
<Nav router={this.props.router} />
<div className="wrap">
{this.props.children}
</div>
</body>
<script src='/bundle.js'></script>
</html>
);
}
});
这是我的导航组件。您可以在 UL 标签中看到我正在使用 anchor 元素。我希望使用该标签，以便 react 路由器将完成其工作，而不必向服务器发送新请求。我尝试了一些不同的方法来实现它，但是我没有成功。是否可以在从服务器渲染的组件中使用 react 路由器？
var React = require('react');
var Logo = require('./logo.jsx');
var Nav = React.createClass({
render: function(){
var mobileMenuShow = function(e){
var el = e.currentTarget;
var list = document.querySelector('.main-nav-list');
if(el.innerHTML === '+'){
el.innerHTML = '-';
list.setAttribute('class', 'main-nav-list open');
} else{
el.innerHTML = '+';
list.setAttribute('class', 'main-nav-list');
}
};
return (
<nav className="background-first main-nav">
<section className="nav-wrap">
<section className="main-nav-left">
<div className="main-nav-logo"><Logo /></div>
<div className="plus-icon" onClick={mobileMenuShow}>+</div>
</section>
<section className="main-nav-right">
<ul ref="navList" className="main-nav-list">
<li><a href="/signup">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Quick Start</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">About</a></li>
</ul>
</section>
</section>
</nav>
)
}
});
module.exports = Nav;
最佳答案
这可能吗，是的。只要在从服务器呈现页面后启动客户端路由器即可。基本上，如果服务器上有唯一的路由器，那么它将始终处理请求。但是，如果您在客户端中也加载了一个，那么它将接收客户端转换，并且仅在您重新加载页面 (F5) 或输入新 URL 时才使用服务器。 Check out the React Router Mega Demo看看如何client.js从服务器加载应用程序后，文件还会创建一个路由器。
为了完成Link/<li>问题，您只需要创建一个组件来返回选项卡内的链接。
以下是如何实现此目的的示例 ( taken from issue 666 )。
var NavTab = React.createClass({
contextTypes: {
router: router: React.PropTypes.func
},
render: function () {
var isActive = this.context.router.isActive(this.props.to, this.props.params, this.props.query);
var className = isActive ? 'active' : '';
var link = (
<Link {...this.props} />
);
return <li className={className}>{link}</li>;
}
});关于javascript - 在服务器上渲染的 React 组件中使用链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32392938/