Javascript 在服务器上呈现的React组件中使用链接_Javascript_Reactjs_React Router

Javascript 在服务器上呈现的React组件中使用链接

javascript reactjs

Javascript 在服务器上呈现的React组件中使用链接,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我使用的是付费伙伴反应引擎。我有一个布局组件，它调用我的导航组件。因为Nav是全局的，所以我想把它放在布局中，两者似乎都呈现在服务器端。当我想在Nav中使用react路由器链接功能时，问题就出现了布局： var React = require('react'); var Nav = require('../../server/components/Nav.jsx'); module.exports = React.createClass({ componentDidMount:

我使用的是付费伙伴反应引擎。我有一个布局组件，它调用我的导航组件。因为Nav是全局的，所以我想把它放在布局中，两者似乎都呈现在服务器端。当我想在Nav中使用react路由器链接功能时，问题就出现了

布局：

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>
        );
    }
});

var React=require（'React'）；
var Nav=require（'../../server/components/Nav.jsx'）；
module.exports=React.createClass({
componentDidMount:function（）{
尝试{Typekit.load（{async:true}）；}catch（e）{}
},
render：函数render（）{
返回(
{this.props.title}
{/*试图将路由器作为道具传递，这是徒劳的尝试*/}
{this.props.children}
);
}
});

这是我的导航部件。你可以在UL标签中看到我使用的锚元素。我希望使用标签，这样react路由器就可以完成它的任务，而不必向服务器发送新的请求。我尝试了一些不同的方法，但都没有成功。甚至可以在从服务器渲染的组件中使用react router吗

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;

var React=require（'React'）；
var Logo=require（'./Logo.jsx'）；
var Nav=React.createClass({
render:function（）{
var mobileMenuShow=功能（e）{
var el=e.currentTarget；
var list=document.querySelector（“.main nav list”）；
如果（el.innerHTML==='+'）{
el.innerHTML='-'；
setAttribute（'class'，'main nav list open'）；
}否则{
el.innerHTML='+'；
setAttribute（'class'，'main nav list'）；
}
};
返回(
+







)
}
});
module.exports=Nav；

可能吗，是的。只要在从服务器呈现页面后启动客户端路由器。基本上，如果服务器上只有一个路由器，那么它将始终处理请求。但是，如果您在客户端中也加载了一个，那么它将拾取客户端转换，并且仅在您重新加载页面（F5）或输入新URL时使用服务器。查看从服务器加载应用程序后，

client.js

文件如何创建路由器

要完成

链接

问题，您只需创建一个组件以返回选项卡内的链接

下面是一个如何完成此任务的示例（）

var NavTab=React.createClass({
上下文类型：{
路由器：路由器：React.PropTypes.func
},
渲染：函数（）{
var isActive=this.context.router.isActive（this.props.to，this.props.params，this.props.query）；
var className=isActive？'active'：''；
变量链接=(
);
返回{link}；
}
});可能吗，是的。只要在从服务器呈现页面后启动客户端路由器。基本上，如果服务器上只有一个路由器，那么它将始终处理请求。但是，如果您在客户端中也加载了一个，那么它将拾取客户端转换，并且仅在您重新加载页面（F5）或输入新URL时使用服务器。查看从服务器加载应用程序后，client.js
文件如何创建路由器
要完成链接
/
问题，您只需创建一个组件以返回选项卡内的链接
下面是一个如何完成此任务的示例（）

var NavTab=React.createClass({
上下文类型：{
路由器：路由器：React.PropTypes.func
},
渲染：函数（）{
var isActive=this.context.router.isActive（this.props.to，this.props.params，this.props.query）；
var className=isActive？'active'：''；
变量链接=(
);
返回{link}；
}
});