Как заставить Nav.Link href работать с gh-страницами - PullRequest
Новая
       12

Как заставить Nav.Link href работать с gh-страницами

1 голос
/ 12 мая 2019

Я пытаюсь научиться реагировать и, изучив основы, я посмотрел онлайн-видео о том, как создать веб-приложение. Теперь все выглядит хорошо на моем местном. Но я хочу опубликовать его на страницах github, поэтому я установил gh-pages и выполнил следующие шаги: https://github.com/gitname/react-gh-pages

Итак, моя страница в https://alvincabayan.github.io/amc-webapp/, Единственная проблема в том, что ссылки не работают.

package.json: 

{
  "name": "amc-webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.6",
    "react-dom": "^16.8.6",
    "react-particles-js": "^2.6.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^2.0.1"
  },
  "homepage": "http://alvincabayan.github.io/amc-webapp"
}

NavigationBar.js: 

import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styled from 'styled-components';

const Styles = styled.div`
  .navbar {
    background-color: #222;
  }
  a, .navbar-brand, .navbar-nav .nav-link {
    color: #bbb;
    &:hover {
      color: white;
    }
  }
`;

export const NavigationBar = () => (
  <Styles>
    <Navbar expand="lg">
      <Navbar.Brand href="/">AMC</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
        <Nav.Item>
            <Nav.Link href="/">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="/about">About</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="/contact">Contact</Nav.Link>
        </Nav.Item>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  </Styles >
)

App.js 

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import {Home} from './components/Home';
import {About} from './components/About';
import {Contact} from './components/Contact';
import {NoMatch} from './components/NoMatch';
import {Layout} from './components/Layout';
import {NavigationBar} from './components/NavigationBar';
import {HomeJumbotron} from './components/HomeJumbotron';



function App() {
  return (
    <React.Fragment>
      <Router>
        <NavigationBar/>
        <HomeJumbotron/>
        <Layout>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route component={NoMatch} />
          </Switch>
        </Layout>
      </Router>

    </React.Fragment>
  );
}

export default App;

Не должны коды: 

<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/contact">Contact</Nav.Link>

указать на: 

https://alvincabayan.github.io/amc-webapp/
https://alvincabayan.github.io/amc-webapp/about
https://alvincabayan.github.io/amc-webapp/contact

Я вижу, что соответствующие js загружаются, когда я проверял страницу, но при попытке перетаскивания их в браузер получилось 404.

Пожалуйста, помогите. Спасибо.

Ответы [ 2 ]

1 голос
/ 12 мая 2019

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

Таким образом, вы можете сделать для домашней страницы: 

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

У меня была такая же проблема, опубликованона ТА без ответа.Возможно, это не самые лучшие вещи, но это работает.

0 голосов
/ 12 мая 2019

React router позволяет вам установить базовое имя, используемое для всех маршрутов. Просто используйте это https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md#basename-string

...