react-router-dom 和 github 页面的问题答案

【问题标题】：Issue with react-router-dom and github pagesreact-router-dom 和 github 页面的问题
【发布时间】：2020-10-10 22:01:29
【问题描述】：

所以，首先我遇到了路由无法正常工作的问题，但我使用 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;

有什么想法吗？我尝试将“精确”添加到第二条不起作用的路由，并且我还尝试将路由器包装在“交换机”中，但这也不起作用。我被难住了。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你的路线在 el.所以当路由更改时重新渲染的部分是 Route 组件，而 div 和 navbar 没有重新渲染这是您在第一个组件下方看到新路由的原因，您应该这样做

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

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

【讨论】：