Вложенный маршрут в React Router перезагружает всю страницу

Question

Я пытаюсь настроить вложенность в реагирующем маршрутизаторе. У меня есть следующий код:

import React from 'react';
import DefaultSwitch from './components/DefaultSwitch/DefaultSwitch';
import './scss/App.scss';

const App = () => {
    return (
        <DefaultSwitch />
    );
};
export default App;

С DefaultSwitch определенным как:

const DefaultSwitch = () => {
    return (
        <Switch>
            <Route exact path='/' component={Landing} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/logout' component={Logout} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    );
}

Внутри Dashboard у меня есть следующее:

const Dashboard = () => {
    return (
        <div>
            <MyNavbar />
            <DashboardSwitch />
        </div>
    );
};

И, наконец, DashboardSwitch как:

const DashboardSwitch = () => {
    return (
        <Switch>
            <Route exact path='/dashboard' component={Home} />
            <Route exact path='/dashboard/home' component={Home} />
            <Route exact path='/dashboard/bonuses' component={Bonuses} />
        </Switch>
    );
}

Кажется, что маршрутизация работает, и правильные компоненты загружены, однако я заметил, что если, например, я нахожусь в /dashboard, а затем перехожу к /dashboard/bonuses всему страница перезагружается, включая компонент MyNavbar. Я хочу, чтобы панель навигации оставалась статичной c и перезагружалось только содержимое под ней, как я определил в компоненте Dashboard.

Что я здесь делаю не так?

Answer 1

Рассмотрите возможность использования общей для всех компонентов макета или чего-то подобного, чтобы избежать потери MyNavbar, например:

const App = () => (
    <BrowserRouter>
        <Layout>
            <Switch>
                <Route exact path='/' component={Landing} />
                <Route exact path='/login' component={Login} />
                <Route exact path='/logout' component={Logout} />
                <Route exact path='/dashboard' component={Home} />
                <Route exact path='/dashboard/home' component={Home} />
                <Route exact path='/dashboard/bonuses' component={Bonuses} />
            </Switch>
        </Layout>
    </BrowserRouter>
)

const Layout = ({ children }) => (
    <div>
        {children}
        <MyNavbar />
    </div>
);