Развертывание Create-React-App на github - PullRequest
0 голосов
/ 28 мая 2018

У меня проблемы с развертыванием моего приложения create-Reaction-app на gh-страницах.Моя целевая страница работает нормально, но две другие страницы не загружаются, и я получаю ошибку 404.Я нашел документацию, в которой говорится, что gh-pages не поддерживает маршрутизаторы, которые используют HTML 5 pushState.Что это значит и как я могу заставить свое приложение работать без проблем?

app.js:

import React, { Component } from 'react';
import {HashRouter, Switch, Route} from 'react-router-dom';
import Navigation from './Components/Navigation';
import Landing from './Components/Landing';
import ToiletInfo from './Components/ToiletInfo';
import Location from './Components/Location';
import {data} from './data';
import './App.css';

class App extends Component {
render() {

 return (
  <HashRouter>
    <Switch>
      <div className="App">
      <Navigation />
      <Route 
        exact path='/' 
        render={(props) => <Landing {...props} data={data} />}
        />
        <Route 
        exact path='/ToiletInfo' 
        render={(props) => <ToiletInfo {...props} data={data} />}
        />
        <Route 
        exact path='/Location' 
        render={(props) => <Location {...props} data={data} />}
        />
        {/* // <Landing data={data}/> */}
      </div>
    </Switch>
  </HashRouter>
);
}
}


export default App;

1 Ответ

0 голосов
/ 28 мая 2018

В большинстве одностраничных приложений с маршрутизацией на стороне клиента, таких как react-router, вы должны указать серверу обслуживать / отображать index.html в случае несопоставленных маршрутов, что на страницах github невозможно, и вы должны следоватьthis https://github.com/facebook/create-react-app/issues/1765.

Пример для экспресса:

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build/index.html'));
});

Но вы можете найти другие варианты использования здесь: https://angular.io/guide/deployment

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...