Prevent React-router-dom to refresh the page and reset the information entered on click

Issue

My problem is that react-router-dom resets the different states of my app. For example if a note is entered in the note category, and then I click on 'music' and then go back to the notes, they will have disappeared on refresh.

The same for my header, where I included a button to enlarge the window and another to reduce it. If I am in the 'note' category and I enlarge the window. And I navigate to 'music' or 'inbox', the window size will reset to the original size. And it will not keep the css class that the button injected.

App

class App extends React.Component {
    render() {
        return (
            <>

                <div className="window" id="window" >
                    <div className="window-body" >
                        <HeaderType />
                        <div className='window_inner'>
                            <ColumnLeft />
                            <ColumnRight />
                        </div>
                    </div>
                </div>

                <div className="addWindowBody" id="openWindow">
                    <a href='/'>
                        <div className="addWindow">
                            <div class="material-symbols-outlined" >
                                open_in_full
                            </div>
                        </div>
                    </a>
                </div>

                <div className="addDarkMode"></div>

            </>

        )
    }
}

export default App;

ColumnLeft

class ColumnLeft extends React.Component {
    render() {
        return (
            <>
                <div className="column_left">
                    <a href="/note" className='link'>
                        <div className="elements">
                            Prendre des notes
                            <span className="line"></span>
                        </div>
                    </a>

                    <a href="/inbox" className='link'>
                        <div className="elements">
                            Envoyer un message
                            <span className="line"></span>
                        </div>
                    </a>

                    <a href="/music" className='link'>
                        <div className="elements">
                            Ecouter de la musique
                            <span className="line"></span>
                        </div>
                    </a>

                </div>
            </>
        )
    }
}

export default ColumnLeft;

ColumnRight

class ColumnRight extends React.Component {
    render() {
        return (
            <>
                <div className="column_right">
                    <BrowserRouter>
                        <Routes>
                            <Route path="/"  />
                            <Route path="/note" element={<Note />} />
                            <Route path="/inbox" element={<Inbox />} />
                            <Route path="/music" element={<Music />} />
                        </Routes>
                    </BrowserRouter>
                </div>
            </>
        )
    }
}

export default ColumnRight;

Solution

Use the Link component with target path on the to prop instead of raw anchor tags with href attribute to issue internal navigation actions to the other routes your app handles. The raw anchor tag is reloading the page, and thus reloads the app. In other words, the React app is remounting.

Move the BrowserRouter component higher in the ReactTree such that it is providing a routing context to the entire app. This is so the links in ColumnLeft and the routes in ColumnRight access the same routing context for routing and navigation purposes.

Example:

App

import { BrowserRouter, Link } from 'react-router-dom';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div className="window" id="window">
          <div className="window-body">
            <HeaderType />
            <div className='window_inner'>
              <ColumnLeft />
              <ColumnRight />
            </div>
          </div>
        </div>
        <div className="addWindowBody" id="openWindow">
          <Link to='/'>
            <div className="addWindow">
              <div class="material-symbols-outlined">
                open_in_full
              </div>
            </div>
          </Link>
        </div>
        <div className="addDarkMode" />
      </BrowserRouter>
    );
  }
}

ColumnLeft

import { Link } from 'react-router-dom';

class ColumnLeft extends React.Component {
  render() {
    return (
      <div className="column_left">
        <Link to="/note" className='link'>
          <div className="elements">
            Prendre des notes
            <span className="line" />
          </div>
        </Link>
        <Link to="/inbox" className='link'>
          <div className="elements">
            Envoyer un message
            <span className="line" />
          </div>
        </Link>
        <Link to="/music" className='link'>
          <div className="elements">
            Ecouter de la musique
            <span className="line" />
          </div>
        </Link>
      </div>
    );
  }
}

ColumnRight

class ColumnRight extends React.Component {
  render() {
    return (
      <div className="column_right">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/note" element={<Note />} />
          <Route path="/inbox" element={<Inbox />} />
          <Route path="/music" element={<Music />} />
        </Routes>
      </div>
    );
  }
}

Answered By - Drew Reese