IndexRoute не отображается при нажатии на страницы GH

Question

У меня небольшая проблема с моей настройкой React Router, но после просеивания на Stack Overflow и GH я не смог настроить мой код в рабочем состоянии.

Моя проблема заключается в том, что при загрузке на страницы GH индексный маршрут отображает мой компонент NoMatch по умолчанию, а не мой домашний компонент. При запуске того же приложения на локальном сервере localhost: 3000 корректно отображает Home.

Мои маршруты устанавливаются следующим образом:

ReactDOM.render((
 
    <Router history={browserHistory}> 
 
    <Route path="/" component={App}> 
 
     <IndexRoute component={Home} /> 
 
     <Route path="home" component={Home} /> 
 
     <Route path="projects" component={Projects} /> 
 
     <Route path="photography" component={Photography} /> 
 
     <Route path="about" component={About} /> 
 
     <Route path="contact" component={Contact} /> 
 
     <Route path="creativeprocess" component={CreativeProcess} /> 
 
     <Route path="readinglist" component={ReadingList} /> 
 
     <Route path="*" component={NoMatch} /> 
 
    </Route> 
 
    </Router>), 
 
    document.getElementById('root')

И мой App.js имеет секцию заголовка, а затем следует за ним с DIV для {this.props.children} , На страницах GH и локальном маршруте все маршруты работают, как указано, кроме IndexRoute при первоначальном рендеринге.

Как сделать компонент Home компонентом по умолчанию при нажатии на страницы GH?

Большое спасибо за помощь!

Answer 1

GitHub Pages служит статический контент, но вы используете browserHistory, который требует какого-то маршрутизатора на сервере для обслуживания страниц. Для статического контента вы должны использовать hashHistory.

ReactDOM.render((
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home} /> 
     <Route path="home" component={Home} /> 
     <Route path="projects" component={Projects} /> 
     <Route path="photography" component={Photography} /> 
     <Route path="about" component={About} /> 
     <Route path="contact" component={Contact} /> 
     <Route path="creativeprocess" component={CreativeProcess} /> 
     <Route path="readinglist" component={ReadingList} /> 
     <Route path="*" component={NoMatch} /> 
    </Route> 
    </Router> 
), document.getElementById('root')) 

Я написал длинное иш объяснения о том, почему вы хотите использовать hashHistory в this answer, но суть его в том, что, когда пользователь переходит на страницу, ваше приложение размещенная на, они всегда должны быть поданы ваше приложение. Приложение будет использовать текущий URL-адрес, чтобы определить, что делать.

Для статического сайта нет обратного конца для обслуживания правильных файлов независимо от пути. Чтобы гарантировать, что все маршруты служат для правильного контента, вы должны использовать историю хэша. При использовании хэш-истории путь до хэша находится там, где находится ваш html-файл, а хэш будет использоваться для определения маршрута для рендеринга.

Answer 2

Arun, так как это было связано с рендерингом приложения на сервере GitHub, я не верю, что скрипка предоставила бы много возможностей для показа этой проблемы. Я все же понял это, но я изменил маршрут маршрута = "/" на Route path = "/ stasreactapp", который является именем моего репозитория в GitHub и идентификатором URL страницы GH. Это означает, что локальный сервер должен будет работать на «3000/stasreactapp». Затем я заменил все подпрограммы на нечто вроде «/ home» вместо «home».

Эти изменения разрешили рендеринг на странице GH, и все, кажется, сейчас работают хорошо!

Самой страница на https://mym1990.github.io/reactstasapp/