Использовать ссылку в реакторе, представленной на сервере

Я использую механизм реакции на оплату услуг связи. У меня есть компонент компоновки, который вызывает мой компонент Nav. Поскольку Nav является глобальным, я хотел поместить его в Layout, оба кажутся отображаемыми на стороне сервера. Проблема возникает, когда я хочу использовать реакцию маршрутизаторов. Функция Link в Nav.Использовать ссылку в реакторе, представленной на сервере

Планировка:

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

Вот мой компонент Nav. Вы можете видеть в теге UL я использую элементы привязки. Я хотел бы использовать тег так реагировать маршрутизатор будет делать свое дело вместо того, чтобы отправлять новый запрос на сервер. Я пробовал несколько разных вещей, чтобы сделать это, однако я был неудачным. Можно ли даже использовать маршрутизатор реакции в компоненте, передаваемом с сервера?

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;

источник

2015-09-04 pizza-r0b

Возможно ли, да. Пока у вас есть клиентский маршрутизатор, начинающийся после того, как страница будет отображаться с сервера. В принципе, если единственный маршрутизатор на сервере, то он всегда будет обрабатывать запросы. Но, если у вас есть один загруженный в клиенте, то он подберет клиентские переходы и будет использовать сервер только при перезагрузке страницы (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>; 
 
    } 
 

 
});

источник

2015-09-05 20:19:24

Использовать ссылку в реакторе, представленной на сервере

ответ

Смежные вопросы