Назад и Переслать историю на дочерние маршруты - PullRequest
Новая
       46

Назад и Переслать историю на дочерние маршруты

0 голосов
/ 28 октября 2019

Я пытаюсь объединить концепцию дочерних маршрутов с Material UI Drawer.

Короче говоря, вот как все доступно на данный момент.

Index.js 

ReactDOM.render(<Routes />, document.getElementById('root'));

Routes.js 

const Routes = () => (
<ThemeProvider theme={theme}>
    <BrowserRouter>
        <Switch>
            <Route exact path='/login' component={Login} />
            <Route exact path='/recuperar_senha' component={ForgotPassword} />
            <PrivateRoute exact path='/' component={App} />
            <Switch>
                <PrivateRoute exact path='/teste' component={Teste} />
            </Switch>
        </Switch>
    </BrowserRouter>
</ThemeProvider>
);

App.js 

return (
        <div className={this.props.classes.root}>
            <CssBaseline/>
            <AppBar/>
            <Drawer/>
            <main className={this.props.classes.content}>
                <div className={this.props.classes.toolbar} />
                {this.props.children}
            </main>
        </div>
)

Пока что я не получил то, что хотел, что, например, визуализировало бы компонент Test внутриОсновной тег Drawer.

Я видел официальную документацию и некоторые примеры, но все же концепция дочерних маршрутов меня смущает.

Я также нашел похожие вопросы, но это не помогло мне..

Цените любую помощь!

НОВЫЙ ПРОГРЕСС:

Я добился прогресса, он достигает того, что мне нужно. Я смог выполнить рендеринг внутри Drawer, создав новую константу, которая содержит дочерние маршруты приложения.

Routes.js 

const Routes = () => (
<ThemeProvider theme={theme}>
    <BrowserRouter>
        <Switch>
            <Route exact path='/login' component={Login} />
            <Route exact path='/recuperar_senha' component={ForgotPassword} />
            <PrivateRoute exact path='/' component={AppRoutes} />
        </Switch>
    </BrowserRouter>
</ThemeProvider>
);

const AppRoutes = () => (
<BrowserRouter>
    <App>
        <Switch>
            <PrivateRoute exact path='/clientes' component={GridCostumers} />
            <PrivateRoute exact path='/' component={Teste} />
        </Switch>
    </App>
</BrowserRouter>
);

Но теперь логика, когда я вхожу в дочерний маршрут клиента, после щелчкав ссылке на корневой маршрут и вернуться в браузер, он не отображает клиентский маршрут, он отображает пустой экран. Это теряется в истории.

...