將 React 應用程序發布到 Github 頁面的問題

Question

好的，所以當我運行 npm run deploy 時，所有步驟都遵循了，它說已發布......很棒。

檢查 Github 托管鏈接，奇怪的是它實際上只顯示我的導航欄組件，沒有別的。 正如您在下面 app.js 中的路由器所看到的，它應該顯示導航欄元素和 RecipeList 組件。 手動輸入路由會導致 404。

app.js -

import React from 'react';
import './App.css';
import Navbar from './Component/Navbar/Navbar';
import RecipeList from './Component/RecipeList/RecipeList';
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import RecipeItemDetails from './Component/RecipeItemDetails/RecipeItemDetails';



function App() {
  return (
    <BrowserRouter>
    <Switch>
    <div className="App">
      <Navbar/>
      <Route exact path="/" component={RecipeList} />
      <Route path="/recipes" component={RecipeList} />
      <Route path="/recipes/:id" component={RecipeItemDetails} />
    </div>
    </Switch>
    </BrowserRouter>
  );
}

export default App;

package.json -

{
  "name": "gmcb-react",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://Wrecket.github.io/GMCB-react-conversion",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "save-dev": "0.0.1-security"
  },

誰能告訴我我可能會犯什么業余錯誤？

Answer 1

我認為這篇文章將有助於解釋我針對我的一個項目的ghpage部署的類似問題。

基本上，您需要利用<BrowserRouter/>的 basename 屬性讓<Routes/>像在 ghpages 上本地一樣工作，特別是將值設置為；

basename={process.env.PUBLIC_URL}