Javascript react路由器dom和github页面出现问题

因此，首先我遇到了路由不起作用的问题，但我解决了使用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;

从“React”导入React；
导入“/App.css”；
从“./Component/Navbar/Navbar”导入导航栏；
从“./Component/RecipeList/RecipeList”导入RecipeList；
从“react router dom”导入{Switch，Route，BrowserRouter}
从“./Component/RecipeItemDetails/RecipeItemDetails”导入RecipeItemDetails；
函数App（）{
返回(
);
}
导出默认应用程序；

---

有什么想法吗？我试着在第二条路线上加上“精确”，但这不起作用，我也试着用“交换机”包装路由器，但这也不起作用。我被难住了。

你的路线在el内。因此，当管线更改时，重新渲染的部分是管线组件，而div和navbar没有重新渲染这就是为什么您在第一个组件下看到新管线，您应该这样做

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

然后在RecipeList和RecipeItemDetails中导入导航栏并将其包含在所需的