在 ReactJS 中使用多个布局的正确方法是什么

Question

我是 React 的新手。 我需要在我的项目中使用多个布局。 我搜索了一个教程，但有很多不同的方法，但找不到一个有效的例子。

下面是我的 App.js。 如何为登录页面添加第二个布局？

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Urun } from './components/Urun';
import { Sepet } from './components/Sepet';
import { Urunler } from './components/Urunler';

export default class App extends Component {
    displayName = App.name

    render() {
        return (
            <Layout>
                <Route exact path='/' component={Home} />
                <Route path='/counter' component={Counter} />
                <Route path='/fetchdata' component={FetchData} />
                <Route path='/Urun' component={Urun} />
                <Route path='/Sepet' component={Sepet} />
                <Route path='/Urunler' component={Urunler} />      
            </Layout>
        );
    }
}

这是@Quentin 的回答

感谢@Quentin，他没有给我鱼，而是帮我钓到了鱼。

这是 App.js

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Urun } from './components/Urun';
import { Sepet } from './components/Sepet';
import { Urunler } from './components/Urunler';
import { Giris } from './components/Giris';
import { Kayit } from './components/Kayit';

export default class App extends Component {
    displayName = App.name

    render() {
        return (
            <div>
                <Route exact path='/' component={Home} />
                <Route path='/counter' component={Counter} />
                <Route path='/fetchdata' component={FetchData} />
                <Route path='/Urun' component={Urun} />
                <Route path='/Sepet' component={Sepet} />
                <Route path='/Urunler' component={Urunler} />
                <Route path='/Giris' component={Giris} />
                <Route path='/Kayit' component={Kayit} />
            </div>
        );
    }
}

这是 Home.js

import React, { Component } from 'react';
import { Layout } from './Layout';

export class Home extends Component {
    displayName = Home.name

    render() {
        return (
            <Layout>
                <div>
                    ......
                </div>
            </Layout>
        );
    }
}

Answer 1

不管你的Layout组件是什么，把它放在你想要使用它的路由组件中，而不是放在所有路由周围（包括那些你不想使用它的路由）。

Answer 2

每条路线都必须在目标布局中呈现。 例如https://www.c-sharpcorner.com/article/multiple-layout-in-react-with-react-router-v4/

Answer 3

我认为您需要在术语layout和component之间进行更多澄清。 我假设您问如何添加组件？

您首先需要创建文件 ./components/Login.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <p>Login</p>
        )
    }
}

然后使用以下命令导入：

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Urun } from './components/Urun';
import { Sepet } from './components/Sepet';
import { Urunler } from './components/Urunler';
// HERE import your component
import { Login } from './components/Login';

export default class App extends Component {
    displayName = App.name

    render() {
        return (
            <Layout>
                <Route exact path='/' component={Home} />
                <Route path='/counter' component={Counter} />
                <Route path='/fetchdata' component={FetchData} />
                <Route path='/Urun' component={Urun} />
                <Route path='/Sepet' component={Sepet} />
                <Route path='/Urunler' component={Urunler} /> 
                // HERE make it into a route path
                <Route path='/login' component={Login} />      
            </Layout>
        );
    }
}