Why does the whole DOM re-render when navigating between routes?

Question

I am learning react so forgive me if this has been asked a million times but I have browsed and no solution has fixed my issue. Apart from fixing the issue I would like to understand how the mechanics under the hood work...

I have 2 simple components NavBar and Home. Code below for both.

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;

When I navigate between routes, the whole DOM re-renders. I don't want the NavBar to re-render. My routes are declared in App.js as per below, and I have tried moving <NavBar /> outside the <Router> tags and the other way around. I have also tried putting <NavBar /> in its own <div> tags. Still the app behaves the same, whenever I change the URL it re-renders everything. How can this be avoided and what should I read up to properly understand the mechanics?

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;

EDIT:

I think I should've mentioned that re-renders happen when I navigate by manually changing the URL in the browser. I have some code on my /login route that does this.props.history.push('/'); after successful login and the DOM does not re-render. Just {SignInPage} gets unmounted and {Home} gets mounted. I would expect the same behavior when navigating between the pages manually or am I missing something?

It's mentioned in the [very first section](https://reacttraining.com/react-router/web/guides/quick-start): `Note: Instead of we use .` — , Jun 28 '19 at 07:00
I don't think that's the problem. I have removed the `href and ` bit from my `NavBar` completely, and it still behaves the same. I suspect my `App.js` routing is wrong.. — asleniovas, Jun 28 '19 at 07:12
When you say the whole DOM rerenders, do you mean the `` portion too? — apokryfos, Jun 28 '19 at 08:10
Yes, so if I open dev tools in the browser I see the whole DOM being added again, like a page reload. the HTML completely disappears and reappears. I have added an EDIT where I mention that this doesn't happen in a certain situation — asleniovas, Jun 28 '19 at 08:13
Please put your changed code in the question so we can see what you're doing. I built a demo based on your code: https://codesandbox.io/s/silly-smoke-qjmhh — , Jun 28 '19 at 08:30
Thanks Chris, when you click the `Login` in your example it transitions without a re-render. However if you change the URL manually to `https://qjmhh.codesandbox.io/login` it re-renders everything. Is this normal behavior? — asleniovas, Jun 28 '19 at 08:35

score 1 · Answer 1 · answered Jun 28 '19 at 06:57

1

You're using <a> elements to create your links. These cause the browser to navigate to the new URL without triggering the JavaScript that would cause the content to be dynamically updated using React.

Use the <Link> component from whatever React Router library you are using instead.

Why does the whole DOM re-render when navigating between routes?

2 Answers2