react-router-dom 和 github 頁面的問題

Question

所以，首先我遇到了路由不工作的問題，但我使用 react-router-dom 的“基線”屬性解決了這個問題，但現在盡管加載了主頁，但后續鏈接呈現在第一個組件下方，該組件應該消失完全在點擊鏈接時。

它在本地運行良好。

這是我的 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 basename={process.env.PUBLIC_URL}>
    <div className="App">
      <Navbar/>
      <Route exact path="/" component={RecipeList} />
      <Route path="/recipes/:id" component={RecipeItemDetails} />
    </div>
    </BrowserRouter>
  );
}

export default App;

有任何想法嗎？ 我試過在第二條路由中添加“精確”但不起作用，我也試過將路由器包裝在“交換機”中，但這也不起作用。 我難住了。

Answer 1

你的路線在el里面。 所以當路由改變時重新渲染的部分是 Route 組件，而 div 和導航欄沒有重新渲染，這就是你在第一個組件下面看到新路由的原因，你應該做這樣的事情

  <BrowserRouter basename={process.env.PUBLIC_URL}>
  <Route exact path="/" component={RecipeList} />
  <Route path="/recipes/:id" component={RecipeItemDetails} />
  </BrowserRouter>

然后在 RecipeList 和 RecipeItemDetails 中導入導航欄並將其包含在所需的