What is the proper way to use multiple layouts in ReactJS

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

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).

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/

I think you would need to clarify more between terms layout and component.
I assume you asking how to add component?

You would need first create the file ./components/Login.js

import React, { Component } from 'react';

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

Then use the following to import:

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