Почему весь DOM перерисовывается при навигации между маршрутами?

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;

EDIT:

Думаю, я должен был упомянуть, что повторные визуализации происходят, когда я перемещаюсь, вручную изменяя URL-адрес в браузере. У меня есть некоторый код на моем маршруте /login, который делает this.props.history.push('/'); после успешного входа в систему, и DOM не выполняет повторную визуализацию. Просто {SignInPage} снимается и {Home} монтируется. Я ожидал бы того же поведения при переходе между страницами вручную или я что-то упустил?

Answer 1

Вы используете <a> элементы для создания своих ссылок. Это приводит к тому, что браузер переходит на новый URL-адрес без использования JavaScript, что приводит к динамическому обновлению содержимого с помощью React.

Используйте <Link> компонент из любой библиотеки React Router, которую вы используете вместо этого.

---

Дополнительная информация:

• Теги привязки и компоненты ссылок в React

Answer 2

Причиной повторного рендеринга дырочного домена является то, что маршрутизатор меняет корневые свойства.

Посмотрите на вложенные маршрутизаторы, это даст вам представление о том, как достичь своей цели Вложенныймаршруты с реагирующим маршрутизатором v4 / v5