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

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

下面是我的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>
        );
    }
}

import React，{Component}来自'React'；
从“反应路由器”导入{Route}；
从“./components/Layout”导入{Layout}；
从“./components/Home”导入{Home}；
从“./components/FetchData”导入{FetchData}；
从“./components/Counter”导入{Counter}；
从“./components/Urun”导入{Urun}；
从“./components/Sepet”导入{Sepet}；
从“./components/Urunler”导入{Urunler}；
导出默认类应用程序扩展组件{
displayName=App.name
render（）{
返回(
);
}
}

这是@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>
        );
    }
}

import React，{Component}来自'React'；
从“反应路由器”导入{Route}；
从“./components/Home”导入{Home}；
从“./components/FetchData”导入{FetchData}；
从“./components/Counter”导入{Counter}；
从“./components/Urun”导入{Urun}；
从“./components/Sepet”导入{Sepet}；
从“./components/Urunler”导入{Urunler}；
从“./components/Giris”导入{Giris}；
从“./components/Kayit”导入{Kayit}；
导出默认类应用程序扩展组件{
displayName=App.name
render（）{
返回(
);
}
}

这是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>
        );
    }
}

import React，{Component}来自'React'；
从“/Layout”导入{Layout}；
导出类Home扩展组件{
displayName=Home.name
render（）{
返回(
......
);
}
}

无论您的

布局是什么

组件，请将其放在您想要使用它的路由组件中，而不是放在所有路由（包括您不想使用它的路由）周围。

每个路由都必须在目标布局中渲染。

---

例如

我认为您需要进一步澄清

布局

和

组件

这两个术语。 我想你在问如何添加组件

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

import React, { Component } from 'react';

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

import React，{Component}来自'React'；
导出默认类应用程序扩展组件{
render（）{
返回(
登录

)
}
}

然后使用以下命令导入：

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>
        );
    }
}

import React，{Component}来自'React'；
从“反应路由器”导入{Route}；
从“./components/Layout”导入{Layout}；
从“./components/Home”导入{Home}；
从“./components/FetchData”导入{FetchData}；
从“./components/Counter”导入{Counter}；
从“./components/Urun”导入{Urun}；
从“./components/Sepet”导入{Sepet}；
从“./components/Urunler”导入{Urunler}；
//在这里导入您的组件
从“./components/Login”导入{Login}；
导出默认类应用程序扩展组件{
displayName=App.name
render（）{
返回(
//在这里把它变成一条路径
);
}
}

我没有路由组件。我想我需要先添加一个路由组件。@ArifYILMAZ-是的。看到六次你有一个

并且你说

component={SOMETHING}

？这些东西都是路线的组成部分。你能举一个例子说明你的第一个答案吗？我有点困惑编辑

Home

，这样它就可以在

中包装其渲染方法返回的任何内容。对

计数器执行同样的操作。我很感激你的帮助，但我还不太清楚。我还在努力。当你说“编辑主页”时，你是指“Home.js”还是App.js中的那一行