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

Question

[Максим Антонихин]

Разрабатываю просто приложение на реакте + react-router. Вроде бы все правильно, по примеры из оф. репозитория, но при рендере получаю ошибку

Uncaught TypeError: Cannot read property 'makeHref' of undefined

Куски кода:

import { Router, Route, Link } from 'react-router/lib/index';

<Link to="/about">About</Link>

Гугление толку не дало. Буду благодарен за помощь.

Comments

[Леша Федосеев]

Лучше репо с ошибкой куда-нибудь положить. Так сложно что-то сказать.

[Андрей Антропов]

Леша Федосеев: Для начала не стоит импортировать r-r/lib/index сразу брать r-r, остальное после большего количества информации

Answer 1

[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, но я ее не проверял :)