• Почему появляется ошибка 'makeHref' в react-router?

    @ilyes_garifullin
    У меня такая же проблема. При дебаге выяснил что проблема заключается в том что у компонента Link не правильно инициализирован контекст. Как это пофиксить не придумал. Просто не используйте компонент Router.Link пока не поправят в нем баг. Я пока делаю так:

    index.jsx
    var React = require('react');
    var Router = require('react-router')
    var routes = require('../shared/routes')
    var router = Router.create({
    			  routes: routes,
    			  location: Router.HistoryLocation
    			});
    
    window.addEventListener('DOMContentLoaded', onLoad);
    
    function onLoad() {
    	initRouter();
    	initNavbar();
    }
    
    function initRouter(){
    	router.run(function (Handler) {
    	  React.render(<Handler/>, document.getElementById('PageContainer'));
    	});
    }
    
    function initNavbar(){	
    // это потому что навбар рендерится на сервере, 
    // для ссылок которые рендерятся на клиенте думаю можно сделать отдельный компонент по аналогии 
    	var navbar = document.getElementById('Navbar')
    	var links = navbar.getElementsByTagName('a');
    	for(var i = 0; i < links.length; i++)
    		links[i].addEventListener('click', onLinkClicked);	
    }
    
    function onLinkClicked(e) {
    	router.transitionTo(this.getAttribute('data-route-name'));
    	e.preventDefault();
    }


    navbar.jsx
    var React = require('react')
    
    var Navbar = React.createClass({
      render: function() {
        return (
          <div id="Navbar">
    		<a href="/home" data-route-name="home" >Home </a> 
    		<a href="/about" data-route-name="about">About</a>
    	  </div>
        );
      }
    });
    
    module.exports = Navbar;


    routes.jsx, как в примерах
    var React = require("react");
    var Route = require("react-router").Route;  
    var DefaultRoute = require("react-router").DefaultRoute;  
    
    var Layout = require("./layout");
    var Home = require("./home");
    var About = require("./about");
    
    module.exports = (  
      <Route path="/" >
    	<Route name="home" handler={Home} path="/home" />
    	<Route name="about" handler={About} path="/about" />
    	<DefaultRoute handler={Home} />
      </Route>
    );


    UPD
    Пришла мысль что возможно ошибка возникает потому что компонент Link не является дочерним по отношению к Route, но я ее не проверял :)
    Ответ написан
    Комментировать