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 组件。我希望导航栏保持静态，并且只重新加载它下面的内容，正如我在 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>
);