не работает вложенный роутер - PullRequest
Новая
       10

не работает вложенный роутер

0 голосов
/ 23 января 2019

моя структура проекта - приложение | маршрутизатор (ракета) | | значок календаря

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 не работает разбиение кода как вложенный роутер разделять код ??

...