SRA - одностраничное приложение React - при размещении на GitHub не загружает компонент, в котором хранится код маршрутизатора «коммутатора» - PullRequest
Новая
       0

SRA - одностраничное приложение React - при размещении на GitHub не загружает компонент, в котором хранится код маршрутизатора «коммутатора»

0 голосов
/ 14 ноября 2018

Я всюду искал ответ на этот вопрос - и я почти уверен, что именно так я выложил свои Компоненты в своем приложении React:

Создавая свою страницу портфолио в React, яиспользовал приложение CREATE REACT APP, и после того, как оно было полностью завершено и функционировало локально, я внес необходимые изменения в файл package.json для домашней страницы, сборки и т. д. Затем, когда я развернул с помощью Yarn, ссылка на хост открывала мой сайт - но без таковойиз моих компонентов: СОДЕРЖАНИЕ.Этот компонент содержит переключатель, который, в соответствии с маршрутом, будет отображать правильное содержимое в теле страницы, содержащей этот маршрут.

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

Почему это?Опять же - он работает локально, просто отлично, но на страницах GH показывает только заголовок, NavBar и нижний колонтитул для домашней страницы при первой загрузке.

Спасибо,

Rideout

См. Код ниже:

Размещенный URL на страницах GH:

https://operasinger.github.io/VRideout-Portfolio-React/

Partial Package.json: 

"homepage": "http://operasinger.github.io/VRideout-Portfolio-React/",
  "name": "vrideout-portfolio-react",
  "scripts": {
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build"
  },

App.js: 

import React, { Component } from "react";
// import { Link } from "react-router-dom";
// import './Fonts.css';
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/navbar";
import Content from "./components/content";

class App extends Component {
  render() {
    return (
      <div className="App container-fluid" id="background">
        <div className="container">
          <div className="row jumbotronNavy">
            <div className="col-md-4 blue" id="headBlue">
              <h1>Vale Rideout</h1>
            </div>
            <div className="col-md-4 blue" />
            <div className="col-md-4 blue">
              <Navbar />
            </div>
          </div>
          <div className="row" id="content">
            <Content />
          </div>
          <div className="row justify-content-md-center" id="jumbotronFooter">
            <p>&copy; 2018 vale rideout</p>
          </div>
        </div>
      </div>
      // </div>
    );
  }
}

export default App;

Компонент содержимого: 

import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import About from "./about";
import Projects from "./projects";
import Contact from "./contact";

const Content = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={About} />
        <Route path="/projects" component={Projects} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
};

export default Content;

Это домашняя страница, когдапосещение размещенного на GH Pages URL

При обновлении в GH Pages полный маршрут рендерится

Я уверен, что это очень маленькая проблема, но этопоможет мне с развертыванием приложений React - я уверен, что это не проблема, свойственная React.

Спасибо!

Rideout

Ответы [ 3 ]

0 голосов
/ 14 ноября 2018

Если вы не хотите жестко кодировать путь в Router, вы можете установить homepage внутри package.json. Поместив это в пакет: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" будет префикс пути к /VRideout-Portfolio-React при запуске npm run build

0 голосов
/ 15 ноября 2018

На самом деле документация по созданию-реакции-приложению это достаточно хорошо.

Я также заметил, что вы используете компонент Router (BrowserRouter в вашем примере) неправильно. Это должно быть прежде всего из конфигурации маршрутизации и Link s в дереве jsx. Это сделано для вставки контекста, который будет использоваться всеми дочерними элементами Router компонента (даже глубоко вложенного).

TL; DR

Просто используйте <HashRouter> в качестве корневого компонента вашего Приложения.

0 голосов
/ 14 ноября 2018

Компонент BrowserRouter сопоставляет весь URL-адрес, указанный в браузере, с вашими Route s. Поскольку корень вашей реализации React не является базой (/) домена, вы должны добавить свойство baseUrl в BrowserRouter, чтобы отразить этот факт. Я думаю, что вы можете сделать:

<BrowserRouter baseUrl="/VRideout-Portfolio-React"> но если не просто посмотрите на react-router документы.

...