在 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

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

Answer 2

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

Answer 3

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