React Router 只有一个链接工作 Github Pages

Posted 2023-02-21

【中文标题】React Router 只有一个链接工作 Github Pages

【英文标题】：React Router only one link working Github Pages

【发布时间】：2021-06-02 06:48:17

【问题描述】：

由于某种原因，我的链接中只有一个正在使用 react 路由器和 github 页面。主页和索引页面加载正常，但检查页面和沙箱页面的链接在 github 页面上返回 404 错误。这一切都在本地工作，所以我不确定为什么索引在 github 页面上工作，但检查和沙箱不是（背景图像也存储在 /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 或它所说的链接到的任何内容，因此不起作用。我厌倦的另一件事是让所有链接加载索引组件以查看它是否是组件问题，但这并没有改变任何东西。提前感谢您的帮助！

这是我的 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'  />
            <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",

【问题讨论】：

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

【参考方案1】：

@Leandro 评论成功了！将表单更改为链接并将process.env.PUBLIC_URL 更改为（现在硬编码但将更改为 const global var）"/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'  />
            <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;