嵌套路由器无法正常工作

Question

我的项目结构是应用程序                             |                          路由器（火箭）                             | |                         日历徽章

app.js

const HomeComponent = lazy(() => import('./Home'));
const RocketComponent = lazy(() => import('./RocketComponent'));



ReactDOM.render(
    <HashRouter>
                <div className="app">
                    <div className="container">
                        <Suspense fallback={<Loading />}>
                            <Route exact path="/" render={(props) => <HomeComponent {...props} />}/>
                            <Route path="/rocket" render={(props) => <RocketComponent {...props}/>}/>
                        </Suspense>
                    </div>
                </div>
    </HashRouter>,
    document.getElementById('app')
);

RocketComponent.js

import HeaderNew from "./HeaderNew";
import React, {lazy} from 'react';
import RocketMenuNew from "./RocketMenuNew";
import {Route, Switch} from "react-router-dom";

const BadgeComponent = lazy(() => import('./Documents/badge/Document'));
const CalendarComponent = lazy(() => import('./Documents/calendar/Document'));

class RocketComponent extends React.Component {
    render() {
        return (
            <div className="documents-new">
                <HeaderNew />
                <RocketMenuNew />
                    <Switch>
                        <Route exact path={`${this.props.match.path}`} render={(props) => <BadgeComponent {...props} />}/>
                        <Route path={`${this.props.match.path}/badge`}  render={(props) => <CalendarComponent {...props} />}/>
                    </Switch>
            </div>
        );
    }
}

export default RocketComponent

localhost：3000 /＃/ rocket正在运行，并且代码拆分良好。 但是localhost：3000 /＃/ rocket / calendar无法正常工作 如何嵌套路由器代码拆分？