在路线之间导航时,为什么整个DOM都会重新渲染?

时间:2019-06-28 06:46:50

标签: javascript reactjs react-router-dom

如果要问一百万次,我正在学习做出反应,请原谅我,但我已经浏览过,并且没有解决方案可以解决我的问题。除了解决问题外,我还想了解引擎盖下的机制是如何工作的...

我有2个简单的组件NavBarHome。两者下面的代码。

NavBar

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;

Home

import React from "react";

class Home extends React.Component {
    render(){

        return(
            <h1>Home</h1>
        );
    }
}

export default Home;

当我在路线之间导航时,整个DOM重新呈现。我不希望NavBar重新呈现。我的路线在App.js中进行了声明,如下所示,我尝试将<NavBar />移到<Router>标记之外,反之亦然。我还尝试过将<NavBar />放在自己的<div>标签中。该应用程序的行为仍然相同,每当我更改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;

编辑:

我想我应该提到,通过在浏览器中手动更改URL进行导航时会重新渲染。我的/login路由上有一些代码,成功登录后可以执行this.props.history.push('/');,并且DOM不会重新呈现。仅{SignInPage}被卸载而{Home}被卸载。手动在页面之间导航时会出现相同的行为,还是我遗漏了某些东西?

2 个答案:

答案 0 :(得分:0)

之所以重新渲染洞域,是因为路由器正在更改根属性。

看看嵌套路由器,它将使您了解如何实现目标Nested routes with react router v4 / v5

答案 1 :(得分:0)

您正在使用<a>元素创建链接。这些会导致浏览器导航到新的URL而不会触发JavaScript,JavaScript会导致使用React动态更新内容。

使用您正在使用的任何React Router库中的<Link> component


进一步阅读: