React-Router，gh-pages 的问题答案

【问题标题】：React-Router, Problems with gh-pagesReact-Router，gh-pages 的问题
【发布时间】：2020-04-21 05:12:37
【问题描述】：

我正在尝试在 GitHub 页面上部署一个 create-react-app。我正在使用 react-router-dom 并且我在 packages.json 中将主页设置为“http://username.github.io/myproject”但是当我尝试直接输入路径时我得到 github 404“https://username.github.io/myproject/About”如果我输入了错误的路径名将引导我到我的自定义 NoMatch 页面“https://username.github.io/myproject/Abut”

我的 App.js 文件

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import  NavigationBar  from './components/NavigationBar';
import { Footer } from './components/Footer';
import { Home } from './Home';
import { NoMatch } from './NoMatch';
import { Contact } from './Contact';
import { About } from './About';
import { Partners } from './Partners';
import  { Projects }  from './Projects';
import Services from './Services';

function App() {
  return (
    <React.Fragment>
    <NavigationBar/>
      <Router basename="/project-se">
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/About" component={About} />
          <Route path="/Services" component={Services} />
          <Route path="/Projects" component={Projects} />
          <Route path="/Partners" component={Partners} />
          <Route path="/Contact" component={Contact} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      <Footer />
    </React.Fragment>
  );
}

export default App;

这是我的导航组件

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

const Styles= styled.div`

    .navbar-brand,
    .navbar-nav .nav-item .nav-link {
        color: #fff;
        &:hover {
        color: #fb7840;
        }
    }

    .navbar-toggle-icon  {
        background-image: url("data:image/svg+xml;");
        color:#fff;
    }
`;

export default function NavigationBar() {
    return (
        <Styles>
            <Navbar  variant="dark" expand="lg" sticky="top"  style={{backgroundColor: "#000", color: "#fff", borderBottom: "1px solid #fb7840"}}>
                <Navbar.Brand href="/" style={{ fontSize: "24px", fontWeight: "10em" }}>SARWAR ENTERPRISES</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" className="toggler"/>
                <Navbar.Collapse id="responsive-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="/Services">SERVICES</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Projects">PROJECTS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Partners">PARTNERS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Contact">CONTACT</Nav.Link></Nav.Item>
                    </Nav>
                </Navbar.Collapse>
                </Navbar>
        </Styles>
    );
}

【问题讨论】：

当您尝试通过 Navlink 访问页面或尝试手动更改 url 或两者时，您的代码是否不起作用
我都试过了，还是不行

标签： reactjs github-pages react-router-dom

【解决方案1】：

您可以设置基本网址

<Router basename={process.env.PUBLIC_URL}>
</Router>

例如：

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

【讨论】：

现在它正在打开主页“username.github.io/myproject”，但只要我点击任何其他导航链接，它就会给出 github 的错误 404

【解决方案2】：

这里解决的问题是我的代码，我用 HashRouter 替换了 BrowserRouter，并在 Nav.Link 中添加了确切的地址

** 我的 App.js 文件**

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { HashRouter as Router, Switch, Route} from 'react-router-dom';
import  NavigationBar  from './components/NavigationBar';
import { Footer } from './components/Footer';
import { Home } from './Home';
import { NoMatch } from './NoMatch';
import { Contact } from './Contact';
import { About } from './About';
import { Partners } from './Partners';
import  { Projects }  from './Projects';
import Services from './Services';

function App() {
  return (
    <React.Fragment>
    <NavigationBar/>
      <Router basename="/project-se">
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/About" component={About} />
          <Route path="/Services" component={Services} />
          <Route path="/Projects" component={Projects} />
          <Route path="/Partners" component={Partners} />
          <Route path="/Contact" component={Contact} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
      <Footer />
    </React.Fragment>
  );
}

export default App;

这是我的导航组件

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

const Styles= styled.div`

    .navbar-brand,
    .navbar-nav .nav-item .nav-link {
        color: #fff;
        &:hover {
        color: #fb7840;
        }
    }

    .navbar-toggle-icon  {
        background-image: url("data:image/svg+xml;");
        color:#fff;
    }
`;

export default function NavigationBar() {
    return (
        <Styles>
            <Navbar  variant="dark" expand="lg" sticky="top"  style={{backgroundColor: "#000", color: "#fff", borderBottom: "1px solid #fb7840"}}>
                <Navbar.Brand style={{ fontSize: "24px", fontWeight: "10em" }}>SARWAR ENTERPRISES</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" className="toggler"/>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                    <Nav.Item><Nav.Link href="https://example.com/project-se/#/">HOME</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="https://example.com/project-se/#/About">ABOUT</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="https://example.com/project-se/#/Services">SERVICES</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="https://example.com/project-se/#/Projects">PROJECTS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="https://example.com/project-se/#/Partners">PARTNERS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="https://example.com/project-se/#/Contact">CONTACT</Nav.Link></Nav.Item>
                    </Nav>
                </Navbar.Collapse>
                </Navbar>
        </Styles>
    );
}

【讨论】：

【解决方案3】：

如果您使用的是React Router，那么BrowserRouter 目前将无法使用。你可以改用 HashRouter。

// import { BrowserRouter as Router } from 'react-router-dom';
import { HashRouter as Router } from 'react-router-dom'

如果您想使用 BrowserRouter，请将此 basename={process.env.PUBLIC_URL 添加到 Router

来源：https://medium.com/@arijit_chowdhury/deploy-react-app-with-react-router-to-github-pages-for-free-569377f483f

【讨论】：