React router. Отключение перерисовки компонента при переходе по ссылкам в роутере

Question

Пытаюсь разобраться с тем, как для разных переходов по ссылкам, обозначенных внутри router, не перерисовывать навбар. Потому что смысла в этом нет, а SPA-подход нарушается дублированием навбара (как компонента) внутри всех страниц, где этот навбар должен отображаться. При этом важно, что внутри себя навбар обращается к истории, чтобы менять поведение в зависимости от страницы (я это делаю просто на основании сопоставления пути this.props.history.location.pathname). Но если navbar вынести за пределы switch,то история уже будет недоступна. Пробовал явно создать history через createBrowserHistory и передвавать в компоненты. Но в таком случае начинались проблемы с отображением и удалением компонентов при переходе по урлам. Вообще хотелось бы узнать, как принято реализовывать подобные вещи. Буду очень признателен. Код приложения с переходами:

import {BrowserRouter, Switch, Route} from "react-router-dom";
import {PrivateRoute} from "Js/libs/privateRouter";
import "bootstrap/scss/bootstrap.scss";

const App = () => (
    <main className="h-100">
        <Switch>
            <PrivateRoute exact path="/" authMethod={DefaultCheckLogin} component={Blog}/>
            <PrivateRoute exact path="/profile" authMethod={DefaultCheckLogin} component={Profile}/>
            <PrivateRoute exact path="/plan" authMethod={DefaultCheckLogin} component={AcademicPlan}/>
            <Route exact path="/auth" component={Authorization}/>
            <Route exact path="*" component={NotFoundPage}/>
        </Switch>
    </main>
)

ReactDOM.render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
), document.getElementById("root"));

Код навбара:

import React, {Component} from "react";
import {
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavItem,
    MDBNavLink,
    MDBNavbarToggler,
    MDBCollapse,
    MDBDropdown,
    MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBHamburgerToggler
} from "mdbreact";

import {Logout} from 'Js/pages/authorization'
import {Timer} from "Js/components/timer";

class NavbarPage extends Component {
    constructor(props) {
        super(props);
        this.displayRestrict = ["/auth"];
    }

    state = {
        isOpen: false
    };
    toggleCollapse = () => {
        this.setState({isOpen: !this.state.isOpen});
    };

    render() {
        return (
            <div>
                {this.displayRestrict.indexOf(this.props.history.location.pathname) === -1 &&
                <MDBNavbar className="mb-3" color="teal lighten-2" dark expand="md">
                    <MDBNavbarBrand>
                        <strong className="white-text">Navbar</strong>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse}/>
                    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                        <MDBNavbarNav left className="col-lg-8">
                            <MDBNavItem active>
                                <MDBNavLink to="/">Home</MDBNavLink>
                            </MDBNavItem>
                            <MDBNavItem className="d-md-none ">
                                <MDBNavLink to="#!">Личный кабинет</MDBNavLink>
                            </MDBNavItem>
                        </MDBNavbarNav>
                        <MDBNavbarNav right className=" d-none d-md-block">
                            <div
                                className="d-flex align-items-center justify-content-end flex-nowrap">
                                <MDBNavItem>
                                    <img className="navbar__avatar"
                                         src="public/img/Musya.png" alt="oops"/>
                                </MDBNavItem>

                                <MDBNavItem
                                    className="container-fluid flex-column justify-content-center text-center">
                                    <span className="main__title">Юзер</span>
                                    <Timer onZero={Logout.bind(this, this.props.history)}/>
                                </MDBNavItem>
                                <MDBNavItem>
                                    <MDBDropdown>
                                        <MDBDropdownToggle className="dropdown-toggle navbar__dropdown">
                                        </MDBDropdownToggle>
                                        <MDBDropdownMenu right basic>
                                            <MDBDropdownItem onClick={() => {
                                                this.props.history.push("/profile")
                                            }}>Профиль</MDBDropdownItem>
                                            <MDBDropdownItem>Расписание</MDBDropdownItem>
                                            <MDBDropdownItem onClick={() => {
                                                this.props.history.push("/plan")
                                            }}>Учебный план</MDBDropdownItem>
                                            <MDBDropdownItem onClick={() => {
                                                Logout(this.props.history)
                                            }}>Выйти</MDBDropdownItem>
                                        </MDBDropdownMenu>
                                    </MDBDropdown>
                                </MDBNavItem>
                            </div>
                        </MDBNavbarNav>
                    </MDBCollapse>
                </MDBNavbar>
                }
            </div>
        );
    }
}

export default NavbarPage;

БЛОГ НА HUSL

React router. Отключение перерисовки компонента при переходе по ссылкам в роутере

Ответы (0 шт):