出于某种原因,只有一个链接能够在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则不行。无论是在主页上使用按钮还是手动输入链接,结果都是一样的。我还尝试删除链接中的
以下是我的App.tsx:
{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",
process.env.PUBLIC_URL
。相反,为自己定义一个常量并将其分配为 '/my-app',然后在路由器/表单中使用它,而不是使用PUBLIC_URL
。此外,我不确定为什么要使用表单而不是常规链接。另外,你可以尝试在构建时直接从 package.json 中提取"homepage"
值,而不是使用 basename 的常量。 - Leandro