Question

我正在尝试学习反应，在学习了基础知识之后，我在线上观看了一些有关如何创建Web应用程序的视频。现在，我的本地一切都很好。但是我想将其发布在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浏览器结果中来显示它们。

请帮助。谢谢。

Answer 1

在路线的路径中，必须输入存储库的名称。如您所见，现在，当您单击链接时，仓库的名称就会消失。

因此您可以访问主页：

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

我遇到了同样的问题，在SO上没有回答。这可能不是最好的事情，但是可以。

Answer 2

反应路由器允许您设置用于所有路由的基本名称。只需使用此https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md#basename-string

如何使Nav.Link href与gh-pages一起使用

2 个答案: