首页 > 解决方案 > 反应:浏览器不会自行加载页面,直到我刷新页面

问题描述

实际上,问题是当我单击链接时浏览器不会自动获取页面我总是需要刷新然后它会加载该页面,我是新来的反应所以有人知道我可以如何摆脱这个。提前谢谢这里是我的导航条码

function MainNavigation() {
  return (
      <BrowserRouter>
    <header>
      <div>React Meets Up</div>
      <nav>
        <ul>
          <li>
            <Link to="/">AllMeetUp</Link>
          </li>
          <li>
            <Link to="/newmeetup">New MeetUp</Link>
          </li>
          <li>
            <Link to="/favorites">Favourite Page</Link>
          </li>
        </ul>
      </nav>
    </header>
    </BrowserRouter>
  );
}
export default MainNavigation;

这是我的 app.js 代码

import { BrowserRouter, Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import MainNavigation from "./components/Layout/MainNavigation";
import AllMeetsUpPage from "./Pages/AllMeetUp";
import FavouritesPage from "./Pages/Favourite";
import NewMeetUpPage from "./Pages/NewMeetUp";
function App() {
  return (
    <div>
     <MainNavigation />
      <Routes>
        <Route path="/" element={<AllMeetsUpPage />} />
        <Route path="/newmeetup" element={<NewMeetUpPage />} />
        <Route path="/favorites" element={<FavouritesPage />} />
      </Routes>
    </div>
  );
}

export default App;

最后是我的 index.js 代码

import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom';
import "./index.css";
import App from "./App.js";

ReactDOM.render(
  <BrowserRouter>
  <App />
  </BrowserRouter>,
    document.getElementById("root")
);

标签: reactjs

解决方案


我通过先卸载 react-router-dom 然后安装 v5.2.0 来解决这个问题 我还在主导航中删除了浏览器路由标签


推荐阅读