Javascript 为什么在路线之间导航时整个DOM会重新呈现？

我正在学习如何反应，所以请原谅我，如果这个问题被问了一百万次，但我已经浏览了，没有解决方案解决了我的问题。除了解决问题，我还想了解引擎盖下的机械装置是如何工作的

我有两个简单的组件

NavBar

和

Home

。下面是这两者的代码

导航栏：

import React from "react";

class NavBar extends React.Component {
    render () {

        return (

            <nav className="navbar sticky-top navbar-light" style={NavBarStyle}>
                <a className="navbar-brand" href="/">
                    <img src={require('./av_tiny.png')} style={ImageStyle} alt="Logo"></img>
                </a>
            </nav>
        )
    }

}

const NavBarStyle = {
    // some styling
}

const ImageStyle = {
    width: '100px',
    height: '50px',
    marginLeft: '20px'
}

export default NavBar;

当我在路径之间导航时，整个DOM将重新渲染。我不希望

NavBar

重新渲染。我的路线是在

App.js

中声明的，如下所示，我尝试将

移动到

标记之外，然后反过来。我还尝试将

放在它自己的

标记中。但应用程序的行为仍然相同，每当我更改URL时，它都会重新呈现所有内容。如何避免这种情况？我应该读些什么来正确理解力学

import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";

//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"

//Routing to components
class App extends React.Component {
  render() {

    return(
          <div>
            <NavBar/>
            <Router>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/login" component={SignInPage}/>      
            </Router>
          </div>
    )
  }
}

export default App;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route}；
//单个组件
从“/Home”导入主页；
从“/Components/Login”导入登录页；
从“/Components/Layout/NavBar”导入导航栏
//组件布线
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}
导出默认应用程序；

编辑：

---

我想我应该提到，当我在浏览器中手动更改URL导航时，会发生重新呈现。我在我的

/login

路径上有一些代码，可以执行

这个.props.history.push（'/'）{SignInPage}

，然后装载

{Home}

。手动在页面之间导航时，我可能会出现相同的行为，或者我遗漏了什么？

它重新呈现孔dom的原因是路由器正在更改根属性

看看嵌套路由器，它会让你知道如何实现你的目标

你正在使用的

路由器库


进一步阅读：



注意：
中提到了它，而不是我们使用。
我认为这不是问题所在。我已经从我的
导航栏中完全删除了
href和
位，它的行为仍然相同。我怀疑我的
App.js
路由是错误的。当你说整个DOM重新加载程序时，你是指
部分吗？是的，因此如果我在浏览器中打开开发工具，我会看到整个DOM再次被添加，就像重新加载页面一样。HTML完全消失并重新出现。我添加了一个编辑，其中我提到在特定情况下不会发生这种情况。请将更改后的代码放在问题中，以便我们可以看到您正在做什么。我根据您的代码构建了一个演示：我认为这不是问题所在。我已经从我的
导航栏中完全删除了
href和
位，它的行为仍然相同。我怀疑我的App.js路由在某种程度上是错误的。。
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";

//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"

//Routing to components
class App extends React.Component {
  render() {

    return(
          <div>
            <NavBar/>
            <Router>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/login" component={SignInPage}/>      
            </Router>
          </div>
    )
  }
}

export default App;