Question

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

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

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}被卸载。手动在页面之间导航时会出现相同的行为，还是我遗漏了某些东西？

Answer 1

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

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

Answer 2

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

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

进一步阅读：

Anchor tags vs Link components in React

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

2 个答案: