在 Github Pages 上部署后只有主页有效
Only home page works after deploy on GithubPages
我构建并部署了我的 React 应用程序。 React App 仅在 Github 页上显示起始页。当我尝试切换页面时出现 404 错误。 App With Localhost 完美运行。我不知道该怎么办。到目前为止没有任何帮助。我的代码如下:
package.json
{
"name": "HotelLiveDemo",
"homepage": "https://JakubSoldek.github.io/HotelLiveDemo/",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.0.2",
"react-script-tag": "^1.1.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
路由器
const Router = () => {
return (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes>
<Route path='/' element={<AboutUs />} />
<Route path='/hotel' element={<Hotel />} />
<Route path='/ContactUs' element={<ContactUs />} />
<Route path='/RoomsPage' element={<RoomsPage />} />
</Routes>
</BrowserRouter>
);
};
部署到 Github 页面时,您应该在此处使用 HashRouter 而不是 BrowserRouter。 Github 页面不支持浏览器历史记录,因此 Github 页面对从何处导航感到困惑。
看到 this article and also the "Add routing to our application" section here 的结尾。
我构建并部署了我的 React 应用程序。 React App 仅在 Github 页上显示起始页。当我尝试切换页面时出现 404 错误。 App With Localhost 完美运行。我不知道该怎么办。到目前为止没有任何帮助。我的代码如下:
package.json
{
"name": "HotelLiveDemo",
"homepage": "https://JakubSoldek.github.io/HotelLiveDemo/",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.0.2",
"react-script-tag": "^1.1.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
路由器
const Router = () => {
return (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes>
<Route path='/' element={<AboutUs />} />
<Route path='/hotel' element={<Hotel />} />
<Route path='/ContactUs' element={<ContactUs />} />
<Route path='/RoomsPage' element={<RoomsPage />} />
</Routes>
</BrowserRouter>
);
};
部署到 Github 页面时,您应该在此处使用 HashRouter 而不是 BrowserRouter。 Github 页面不支持浏览器历史记录,因此 Github 页面对从何处导航感到困惑。
看到 this article and also the "Add routing to our application" section here 的结尾。