如何防止重新加载整个页面？我不想重新加载导航栏，只使用 react-router-dom 加载里面的组件答案

【问题标题】：How can i prevent reloading the whole page? I don't want to reload the Navbar, only load the components inside using react-router-dom如何防止重新加载整个页面？我不想重新加载导航栏，只使用 react-router-dom 加载里面的组件
【发布时间】：2022-06-28 22:29:06
【问题描述】：

如何防止整个页面/导航栏重新加载，我只想加载里面的组件而不重新加载整个页面。我在下面提到了这两个组件。

App.js

import { useState } from 'react';
import Navbar from './Navbar'
import {BrowserRouter as Router, Routes, Route} from "react-router-dom"; 
import Home from './Home';
import ToDoList from './ToDoList';
import Jobs from './Jobs';

const App = () => {


return(
  <>
    <Router>
      <Navbar />
        <Routes>
        <Route path='/' element={<Home />}/>
        <Route path= '/todolist' element={<ToDoList />}/>
        <Route path= '/jobs' element={<Jobs/>}/>
      </Routes>
    </Router>
  </>
)

}
export default App

Navbar.js

const Navbar = () => {

    return(
        <nav>
            <ul>
            <a href="/"></a>
            <li>
            <a href="/todolist">ToDoList!</a>
            </li>
            <li>
            <a href="/jobs">Jobs</a>
            </li>
            </ul>
        </nav>
    )
}
export default Navbar

【问题讨论】：

标签： reactjs

【解决方案1】：

导航栏不会按照您的方法重新渲染，因为它位于路由器上方。因此，任何更改都只会渲染 Router 组件。但这里的问题是您使用的是 a 标签，它不应该在这里使用，因为 React 是 SPA，您需要使用 <link to="/url">Text</link> Doc

所以在 Navbar.js 中，只需使用适当的道具将您的 a 标签更改为 link，它就不会重新渲染。除非父组件要重新渲染。

import {Link} from "react-router-dom";
const Navbar = () => {

    return(
        <nav>
            <ul>
            <link to="/"></link>
            <li>
            <link to="/todolist">ToDoList!</link>
            </li>
            <li>
            <link to="/jobs">Jobs</link>
            </li>
            </ul>
        </nav>
    )
}
export default Navbar

【讨论】：