React App просто показывает стартовую страницу на страницах Github - PullRequest
Новая
       34

React App просто показывает стартовую страницу на страницах Github

0 голосов
/ 16 апреля 2020

Я создаю приложение реагирования с несколькими маршрутами, которое корректно работает на локальном хосте. Но когда я развертываю его на страницах github, используя npm run deploy, отображается только домашняя страница.

Подробности: приложение называется cp-tools. Когда я открываю username.github.io/cp-tools/, я получаю домашнюю страницу, как ожидалось, но когда я открываю, скажем, username.github.io/cp-tools/problem-filter/ или любая другая страница, на которой говорит github, страница 404 не найдена.

Routing (App.js):

    <div className="App">
      <NavBar />
      <BrowserRouter basename ={process.env.PUBLIC_URL}>
        <Switch>
          <Route exact path = '/' component = {Home} /> 
          <Route exact path = '/problem-filter' component = {ProblemFilter} /> 
          <Route path = '*' component = {NotFound} /> 
        </Switch>
      </BrowserRouter>
    </div>

package.json :

{
"homepage": "https://pshishod2645.github.io/cp-tools",
// other details
}

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Вам нужно использовать точный путь только для / домашнего компонента. Если вы указали точное ключевое слово для всех компонентов маршрутизатора, он занимает первый компонент. 

<Route exact path="/" component={Home} />

, следуйте приведенному ниже строковому коду: Маршрутизация (приложение. js): 

 <div className="App">
      <NavBar />
      <BrowserRouter basename ={process.env.PUBLIC_URL}>
        <Switch>
          <Route exact path = '/' component = {Home} /> 
          <Route path = '/problem-filter' component = {ProblemFilter} /> 
          <Route path = '*' component = {NotFound} /> 
        </Switch>
      </BrowserRouter>
    </div>
0 голосов
/ 16 апреля 2020

Работа страниц GitHub заключается в том, что запрос к URL username.github.io/cp-tools будет обслуживаться файлом index.html, найденным в репозитории github.com/username/cp-tools, ЕСЛИ в репозитории установлена ​​настройка gh-pages.

Если вы в браузере набрали от go до username.github.io/cp-tools/problem-filter, GitHub не сможет найти файлы, соответствующие этому пути, что приведет к 404 ошибкам. Вы по-прежнему можете перейти на эту страницу с точки входа через клиентскую маршрутизацию (используя react-router-dom <Link />, history.push() и т. Д. c).

Я бы посоветовал взглянуть на другие данные c хостинг, такой как Netlify и Zeit Now для этого требования.

Но, если вы хотите остаться со страницами GH, обходной путь должен использовать hashHistory вместо , который использует # для определения пути для вашего приложения React. Вы можете прочитать больше об этом здесь .

...