React Router 只有一个链接在 Github Pages 上运行

Question

出于某种原因，只有一个链接能够在react router和github pages上正常工作。主页和索引页面可以正常加载，但是指向检查页面和沙盒页面的链接返回404错误。所有功能在本地都正常工作，因此我不确定为什么Github Pages上仅仅"index"页面能够工作，而"inspect"和"sandbox"页面不能（背景图片存储在/public中，无论是本地还是在Github Pages上都能够正常工作）。因此，http://user.github.io/my-app/可以工作，http://user.github.io/my-app/index可以工作，但http://user.github.io/my-app/inspect和http://user.github.io/my-app/sandbox则不行。无论是在主页上使用按钮还是手动输入链接，结果都是一样的。我还尝试删除链接中的{process.env.PUBLIC_URL+ }，但这会导致链接跳转到http://user.github.io/index或者其他类似网址，因此这并没有解决问题。我尝试将所有链接加载Index组件，以查看是否是组件问题，但这并没有改变任何东西。感谢您提前的帮助！

以下是我的App.tsx：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import './App.css';
import Home from './components/Home'
import Navbar from './components/Navbar'
import Inspect from './components/Inspect'
import Index from './components/Index'
import Sandbox from './components/Sandbox'

declare global {
    interface Window {
        $pop:any;
    }
}

function App() {
  return (
    <div className="App">
      <Router basename={process.env.PUBLIC_URL}>
        <Navbar />
        <Switch>
          <Route path="/" exact component={() => <Home />} />
          <Route path="/index" exact component={() => <Index />} />
          <Route path="/inspect" exact component={() => <Inspect />} />
          <Route path="/sandbox" exact component={() => <Sandbox />} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

我的Home.tsx文件中有一个按钮，链接到其他页面:

import React, {Component} from 'react';
import './Home.css';

class Home extends Component {
    render() {
      return (
        <div className="Home" style={{ textAlign:"center" }}>
            <img src= {process.env.PUBLIC_URL + '/background.png'} alt="logo" />
            <br /><br /><br />
            <div id="custom">
                <form action={process.env.PUBLIC_URL+"/index"}>
                  <input type="submit" className="home-button" value="Index" />
              </form>
              <br />
              <form action={process.env.PUBLIC_URL+"/inspect"}>
                <input type="submit" className="home-button" value="Inspect" />
            </form>
            <br />
            <form action={process.env.PUBLIC_URL+"/sandbox"}>
                  <input type="submit" className="home-button" value="Sandbox" />
              </form>
            </div>
        </div>
      );
  }
}

export default Home;

package.json 中的主页：

"homepage": "http://user.github.io/my-app",

- evvanerb

---

你不应该使用 process.env.PUBLIC_URL。相反，为自己定义一个常量并将其分配为 '/my-app'，然后在路由器/表单中使用它，而不是使用 PUBLIC_URL。此外，我不确定为什么要使用表单而不是常规链接。另外，你可以尝试在构建时直接从 package.json 中提取 "homepage" 值，而不是使用 basename 的常量。 - Leandro

Answer 1

@Leandro的评论有效了！将表单改为链接，并将process.env.PUBLIC_URL更改为（目前硬编码，但将更改为常量全局变量）"/my-app"。以下是更新后的代码：

import React, {Component} from 'react';
import { Link } from "react-router-dom";
import './Home.css';

class Home extends Component {
    render() {
      return (
        <div className="Home" style={{ textAlign:"center" }}>
            <img src= {process.env.PUBLIC_URL + '/background.png'} alt="logo" />
            <br /><br /><br />
            <div id="custom">
                <Link to="/index">
                  <input type="submit" className="home-button" value="Index" />
              </Link>
              <br /><br />
              <Link to="/inspect">
                <input type="submit" className="home-button" value="Inspect" />
            </Link>
            <br /><br />
            <Link to="/sandbox">
                  <input type="submit" className="home-button" value="Sandbox" />
              </Link>
            </div>
        </div>
      );
  }
}

export default Home;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import './App.css';
import Home from './components/Home'
import Navbar from './components/Navbar'
import Inspect from './components/Inspect'
import Index from './components/Index'
import Sandbox from './components/Sandbox'

declare global {
    interface Window {
        $pop:any;
    }
}

function App() {
  return (
    <div className="App">
      <Router basename="/my-app">
        <Navbar />
        <Switch>
          <Route path="/" exact component={() => <Home />} />
          <Route path="/index" exact component={() => <Index />} />
          <Route path="/inspect" exact component={() => <Inspect />} />
          <Route path="/sandbox" exact component={() => <Sandbox />} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

- evvanerb