What is the proper way to use multiple layouts in ReactJS

Question

I am new to React. I need to use multiple layouts in my project. I searched for a tutorial but there are so many different ways and couldn't find a working example.

Here is my App.js below. How can I add the second layout for Login page?

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

THIS IS THE ANSWER FROM @Quentin

Thanks to @Quentin, he didnt give me the fish but helped me catch the fish.

This is the 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>
        );
    }
}

This is the 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

Whatever your Layout component is, put it inside the route components you want to use it in instead of around all the routes (including those where you don't want to use it).

Answer 2

Each route has to be rendered in the target layout. for e.g https://www.c-sharpcorner.com/article/multiple-layout-in-react-with-react-router-v4/