React Router只有一个链接可以工作Github页面

Question

由于某些原因，我只有一个链接使用react路由器和github页面。主页和索引页加载正常，但是当在github页面上时，指向inspect页面和sandbox页面的链接返回404错误。它全部在本地工作，所以我不确定为什么索引在github页面上工作，而inspect和sandbox不工作(背景图像存储在/public中，在本地和github页面上都工作得很好)。所以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",

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;