Question

我正在尝试将子路线的概念与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>
);

但是现在我输入客户子路由时的逻辑是，单击根路由的链接并在浏览器中返回后，它不呈现客户路由，而是呈现空白屏幕。它迷失了历史。

将历史记录回溯到子路线

0 个答案: