Question

我正在尝试使用React显示不同的布局。我的导航栏带有链接。对于每个链接（服务，工程，联系人...等），我都想渲染导航栏，但是对于登录链接，我不想显示它。所以我的代码如下：

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 Price from './components/pages/Price';
import Works from './components/pages/Works';
import Signin from './components/pages/Signin';
import NotFound from './components/pages/NotFound';

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='/prices' component={Price} />
                            <Route exact path='/works' component={Works} />
                        </PublicLayout>
                        <SigninLayout>
                            <Route exact path='/signin' component={Signin} />
                        </SigninLayout>
                        <Route path="*" component={NotFound} />
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

我希望SigninLayout应该用于登录网址。但是我仍然看到Navbar。这是我的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;

为什么显示导航栏？我在做什么错了？

UPD：

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: '/prices' },
            { id: 3, name: 'Как это работает?', link: '/works' },
            { id: 4, name: 'Войти', link: '/signin' },
        ]
    }

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

export default PublicLayout;

Answer 1

首先让我们使用<Switch>，如果您已经找到了自己的路线，则无需评估其他路线：

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

请注意，我们在此处选择两种布局，子路径将在此处进行。这是您的错误：一个外部组件（PublicLayout和SigningLayout）将被渲染，即使其子元素都不可见（嗯...除非它本身为空）。

const PublicLayout = () => (
    <Switch>
        <Route exact path='/' component={Main} />
        <Route exact path='/services' component={Services} />
        <Route exact path='/prices' component={Price} />
        <Route exact path='/works' component={Works} />
    </Switch>
);

与SigningLayout并行应该很容易。当然，这只是一个例子，但对（未经测试的）应该是微不足道的：

const App = () => (
    <BrowserRouter>
        <div className="App">
            <Switch>
                <Route exact path='/signin'>
                    <SigningLayout><SignIn /></SigningLayout>
                </Route>
                <Route>
                    <PublicLayout>
                        <Switch>
                            <Route exact path='/' component={Main} />
                            <Route exact path='/services' component={Services} />
                            <Route exact path='/prices' component={Price} />
                            <Route exact path='/works' component={Works} />
                        </Switch>
                    <PublicLayout>
                </Route>
            </Switch>
        </div>
    </BrowserRouter>
);

Answer 2

我建议对Switch进行一些重组

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

如何在React中渲染不同的布局？

2 个答案: