相关疑难解决方法(0)

如果我有以下内容:

<Route path="/" component={Containers.App}>

  { /* Routes that use layout 1 */ }
  <IndexRoute component={Containers.Home}/>
  <Route path="about" component={Containers.About}/>
  <Route path="faq" component={Containers.Faq}/>
  <Route path="etc" component={Containers.Etc}/>

  { /* Routes that use layout 2 */ }
  <Route path="products" component={Containers.Products}/>
  <Route path="gallery" component={Containers.Gallery}/>
</Route>

我怎样才能使两组路线各自使用不同的布局.

如果我只有一个布局,那么我会把它放在App中,但在这种情况下,我在哪里定义布局？

为了使其更复杂,一些布局组件(例如顶部导航)在两种布局类型之间共享.

我正在构建一个反应应用程序，但我无法使路由工作。

1. 我需要一些验证途径一个共同的布局（页眉，页脚）（ ，/login，sign-up，forgot-password等...）

2. 我需要需要另一种常见的布局应用程序的保护部分的剩余部分（Home，Dashboard，等...）

3. 我需要另一个没有任何布局的 404 页面。

我从这些链接中尝试了几种技术：

• React Router v4 的多种布局
• https://simonsmith.io/reusing-layouts-in-react-router-4
• 带有反应路由器 v4 / v5 的嵌套路由
• https://reacttraining.com/react-router/web/example/route-config

但可以达到工作版本。

这是我目前拥有的：

（注意：现在我忽略了阻止非登录用户进入 AppLayout 的私有路由的需要，我会在之后处理这个问题）

const App: React.FC = () => {
    const history = createBrowserHistory();

    return (
        <div className="App">
            <Router history={history}>
                <Switch>
                    <AppLayout>
                        <Route path="/home" component={HomePage}/>
                        <Route path="/dashboard" component={DashboardPage}/>
                        ...
                    </AppLayout>
                    <AuthLayout>
                        <Route path="/login" component={LoginPage}/>
                        <Route path="/sign-up" component={SignUpPage}/>
                        ...
                    </AuthLayout>
                    <Route path="*" component={NotFoundPage} />
                </Switch>
            </Router>
        </div>
    );
};

export …

我想显示导航栏只为这个网址：/contact，/services。而且我不想显示的Navbar /signin。目前，这是我所拥有的：

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import PublicLayout from './components/layouts/PublicLayout';
import SigninLayout from './components/layouts/SigninLayout';

import Main from './components/pages/Main';
import Services from './components/pages/Services';
import Contact from './components/pages/Contact';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div className="App">
                  <Switch>                    
                    <PublicLayout>
                            <Route exact path='/' component={Main} />
                            <Route exact path='/services' component={Services} />
                            <Route exact path='/contact' component={Contact} />
                    </PublicLayout>
                    <SigninLayout>
                            <Route exact path='/signin' component={Signin} />
                    </SigninLayout>
                  </Switch> …