2016-11-05 3 views
0

Около четырех дней назад я создал проект с react-router. Я установил все как обычно, после this guide. Затем я установил react-router с помощью рекомендованного метода в официальном Github readme. По какой-то нечетной причине он не выдавал ни одного из моих компонентов, пока я не переместил маршрут в мой файл index.js в моем корневом каталоге, где он начал работать. Раньше маршрут находился внутри моего файла app.jsx.Проблемы с использованием реактивного маршрутизатора для базовой маршрутизации после установки его на новый проект

Сегодня я решил, что хочу создать для себя небольшой портфолио, поскольку я чувствую, что понимаю основы Реакт. Я установил все, как раньше, с версиями 3.0.0 и 15.3.2 от react-router и react/react-dom соответственно. Версии не изменились с момента моего последнего проекта несколько дней назад. Однако кажется, что react-router больше не работает по какой-либо причине, не обнаружив ошибок на моей консоли, и я потратил часы на поиск Google и Stack Overflow для решений. Мой код супер скелетное в настоящее время, с моей index.js файл выглядит как в следующем, без использования react-router:

import React from 'react' 
import {render} from 'react-dom' 

class App extends React.Component { 
    render() { 
     return <div>{this.props.children}</div>; 
    } 
} 

const Home =() => 
    <p>Hello</p>; 

render(
    <App><Home /></App>, 
    document.getElementById('main')) 

Я понимаю, что я должен двигаться в сторону более функционального программирования, но на данный момент у меня есть App написано как класс, по причинам тестирования. Теперь, почему приведенный выше код работает правильно, но нижеприведенный фрагмент кода не даст никаких результатов?

import React from 'react' 
import {render} from 'react-dom' 
import {Router, Route, IndexRoute, hashHistory} from 'react-router' 

class App extends React.Component { 
    render() { 
     return <div>{this.props.children}</div>; 
    } 
} 

const Home =() => 
    <p>Hello</p>; 

render(
    (<Router history="hashHistory"> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
     </Route> 
    </Router>), 
    document.getElementById('main')) 

Я действительно не думаю, что я недопонимание react-router никак. Я пробовал объединить маршрут в (), как я видел в некоторых учебниках, но это не имело никакого значения - очевидно.

С кодом нет в коде? или это может быть что-то еще? Если есть больше информации, я могу предоставить вам, ребята, дайте мне знать. Я могу сделать несколько снимков экрана или что-то в этом роде, если это поможет любому из вас.

ответ

0

Я думаю, вы должны изменить

<Router history="hashHistory"> 

в

<Router history={hashHistory}> 

маршрутизатор ожидает история быть objetct, а не строка:

var Router = _react2.default.createClass({ 
    displayName: 'Router', 

    propTypes: { 
    history: object 

    (...) 
}); 
+0

Это на самом деле не было проблемой. Хотя, это была ошибка, которую я быстро заметил после того, как я опубликовал это. Проблема фактически выполнялась с помощью 'webpack-dev-server'. Когда я просто запускаю 'webpack' и загружаю' index.html' через свой браузер, он работает нормально. Знаете ли вы, почему это так? – staticCoffee

+0

У вас есть ошибки в консоли браузера? –