Как визуализировать различные макеты с помощью React?

Question

Я хочу показать Навбар только для этого URL: /contact, /services.И я не хочу показывать Navbar для /signin.На данный момент это то, что у меня есть:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import PublicLayout from './components/layouts/PublicLayout';
import SigninLayout from './components/layouts/SigninLayout';

import Main from './components/pages/Main';
import Services from './components/pages/Services';
import Contact from './components/pages/Contact';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div className="App">
                  <Switch>                    
                    <PublicLayout>
                            <Route exact path='/' component={Main} />
                            <Route exact path='/services' component={Services} />
                            <Route exact path='/contact' component={Contact} />
                    </PublicLayout>
                    <SigninLayout>
                            <Route exact path='/signin' component={Signin} />
                    </SigninLayout>
                  </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

Когда я перехожу на /signin url, он все равно дает мне Navbar.Итак, ребята - как вы отображаете разные макеты для разных страниц в React?Пожалуйста, помогите!

UPD: Мой код PublicLayout:

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

class PublicLayout extends Component {
    state = {
        items: [
            { id: 1, name: 'Услуги', link: '/services' },
            { id: 2, name: 'Как это работает?', link: '/contacts' },
            { id: 3, name: 'Войти', link: '/signin' },
        ]
    }

    render() {
        return (
            <div>
                <Navbar items={ this.state.items } />
                { this.props.children }
            </div>
        );
    }
}

export default PublicLayout;

Мой код SignInLayout:

import React, { Component } from 'react';

class SigninLayout extends Component {
    state = {

    }

    render() {
        return (
            <div>
                { this.props.children }
            </div>
        );
    }
}

export default SigninLayout;

Мой компонент входа:

import React, { Component } from 'react';

class Signin extends Component {
    state = {

    }

    render() {
        return (
            <div>
                <h1>Войти</h1>
                <form>
                    <input type="text" placeholder="укажите e-mail" />
                    <input type="text" placeholder="укажите пароль" />
                    <button>Войти</button>
                </form>
            </div>
        );
    }
}

export default Signin;

Answer 1

Этого можно добиться, сначала выбрав, какой макет отображать с помощью оператора switch, а затем переместив маршрутизацию для компонентов, которые должны отображаться внутри этого макета, в внутри компонента макета.

В качестве базового примера ваш App компонент может иметь:

<BrowserRouter>
  <div className="App">
    <Switch>
      <Route path="/signin" component={PrivateLayout} />
      <Route path="/" component={PublicLayout} />
    </Switch>
  </div>
</BrowserRouter>

Теперь внутри PublicLayout вы можете отрендерить Nav, а также создать несколько новых маршрутов, например

class PublicLayout extends Component {
  render() {
    return (
      <div>
        <h1>Public Place</h1>
        <Navbar items={[]} />
        <Switch>
          <Route exact path='/' component={Main} />
          <Route exact path='/services' component={Services} />
          <Route exact path='/contact' component={Contact} />
        </Switch>
      </div>
    );
  }
}

export default PublicLayout;

...и в PrivateLayout вы можете визуализировать набор маршрутов без NavBar, например,

class PrivateLayout extends Component {
  render() {
    return (
      <div>
        <h1>Private Place</h1>
        <Switch>
          <Route exact path="/signin" component={Signin} />
          <Route exact path="/signin/otherpath" component={OtherPrivateComponent} />
        </Switch>
      </div>
    );
  }
}

export default PrivateLayout;

Здесь все это в одном файле, который вы также можете увидеть в этом коде и поле :

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch } from "react-router-dom";

const NavBar = props => <div>Nav Bar</div>;

class PrivateLayout extends Component {
  render() {
    return (
      <div>
        <h1>Private</h1>
        <Switch>
          <Route exact path="/signin" render={() => <h2>Signin</h2>} />
          <Route
            exact
            path="/signin/otherpath"
            render={() => <h2>Signin Other</h2>}
          />
        </Switch>
      </div>
    );
  }
}

class PublicLayout extends Component {
  render() {
    return (
      <div>
        <h1>Public Place</h1>
        <NavBar />
        <Switch>
          <Route exact path="/" render={() => <h2>Main Page</h2>} />
        </Switch>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path="/signin" component={PrivateLayout} />
          <Route path="/" component={PublicLayout} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);