How do I keep App() level state from resetting with react-router-dom in React.js?

Question

I have a hook that changes the background color of my app. I would like the background color to stay changed when navigating through the site, but the Router resets this state back to its original useState of 'white'. How do I implement this correctly?

Created with create-react-app.

Edited to show minimum reproducible example:

import React, { useState } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import './App.css';

export default function App() {
  const [color, setColor] = useState('white');

  function changeBackground(value) {
    setColor(value);
  };

  return (
    
      
        
      
    
  );
};

function Navbar(props) {

  return (
    
      
      
        Page 1
      
      
        Page2
      
      
        
        
      
    
  );
};

function Page1() {

  return (
    
      Page 1
    
  );
};

function Page2() {

  return (
    
      Page 2
    
  );
};

/* App.css */
.white {
  background-color: white;
}
.red {
  background-color: red;
}

Previous code before adding minimum reproducible example:

import React, { useState } from 'react';
import { Route, Switch, BrowserRouter } from 'react-router-dom';
import './App.css';
import './assets/fonts/fonts.css';
import Navbar from './components/Navbar';
import Design from './components/Design';
import Develop from './components/Develop';
import Else from './components/Else';
import DesignTest from './pages/DesignTest';

function App() {
  const [backgroundColor, setBackgroundColor] = useState('white');


  function changeBackground(value) {
    setBackgroundColor(value);
  };


  return (
    
      {/*  */}
      
      
        
          
          
          
          
          
        
      
    
  );
}

export default App;

function Navbar(props) {

  return (
  
            
              TITLE
         
              
                
                  DESIGN
                
              
              
                
                  DEVELOP
                
              
              
                
                  EVERY
THING
ELSE
                
              
            
               props.changeBackground('white')}>
            
            
               props.changeBackground('yellow')}>
            
            
               props.changeBackground('blue')}>
            
            
               props.changeBackground('dark')}>
            
          
          
            );
}

export default Navbar;

.yellow {
  background-color: #CDB900;
  color: black;
}
.blue {
  background-color: #009CCD;
  color: black;
}
.dark {
  background-color: #4B394E;
  color: white;
}
.white {
  background-color: white;
  color: black;
}

user_15125722 · Answer

I found my issue. I was using instead of importing Link from react-router-dom, causing the entire page to re-render. Here is the version that worked as I intended:

import React, { useState } from 'react';
import { Route, Switch, BrowserRouter, Link } from 'react-router-dom';
import './App.css';

export default function App() {
  const [color, setColor] = useState('white');

  function changeBackground(value) {
    setColor(value);
  };

  return (
    
      
        
      
    
  );
};

function Navbar(props) {

  return (
    
      
      
        Page 1
      
      
        Page2
      
      
        
        
      
    
  );
};

function Page1() {

  return (
    
      Page 1
    
  );
};

function Page2() {

  return (
    
      Page 2
    
  );
};

/* App.css */
.white {
  background-color: white;
}
.red {
  background-color: red;
}

user_3894472 · Answer

I had the same issue of complete app state refresh as I click on the navbar for a route change. It turned out that the issue was due to not using Link component provided by react router.

In my case I was using bootstrap navbar components. The code that I got from bootstrap site creates navbar link like this:

Home

This navigation through 'href' is the problem here. So in order to overcome this issue I wrapped Nav.Link inside LinkContainer. This allowed me to remove href from Nav.Link and I provided the route url using 'to' property in LinkContainer.


    Home

In order to use LinkContainer I had to install and import it.

npm install react-router-bootstrap


import { LinkContainer } from "react-router-bootstrap";

user_3267920 · Answer

Because your Navbar is outside the router component, meaning everything you click something it's actually reloading the page instead of being captured by react-router. Move the navbar component inside browser router:

user_1349974 · Answer

It is seems that something trigger re-render the whole App. Probably React Developer Tools can help you to find that place in code.

I have created an isolated example - https://codesandbox.io/s/solitary-wood-8oi66?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

In this example value with color from the hook also saves into the browser LocalStorage, and use as a default value for the first render, so it makes it possible to keep the background color after reloading the page. Maybe this is what you want to achieve. but I'm not sure.

  const defaultColor = localStorage.getItem("bgColor");
  const [backgroundColor, setBackgroundColor] = useState(
    defaultColor || "white"
  );

  function changeBackground(value) {
    setBackgroundColor(value);
    localStorage.setItem("bgColor", value);
  }

How do I keep App() level state from resetting with react-router-dom in React.js?

4 Answers