无法使用布局渲染 React 组件答案

【问题标题】：Can't render React Component using layout无法使用布局渲染 React 组件
【发布时间】：2019-02-27 20:24:47
【问题描述】：

我有Navbar，它必须在每个页面上呈现。所以我试图通过 BrowserRouter 像这样：

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import PublicLayout from './components/layouts/PublicLayout';
import Main from './components/pages/Main';
import Services from './components/pages/Services';

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

export default App;

我的 PublicLayout 只是导航链接。我在屏幕上看到了它。但是 React 不会渲染 Main page 内容。我希望从导航栏下方的主页组件中看到它只是 Hello World。我做错了什么？请帮忙。

UPD：我的 PublicLayout 代码：

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

class PublicLayout extends Component {
    state = {
        items: [
            { id: 1, name: 'Услуги', link: '/services' },
        ]
    }

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

export default PublicLayout;

UPD2：在浏览器控制台中我看到一个错误：

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将<Route component={ PublicLayout }> 替换为<PublicLayout>

<PublicLayout>
    <Route exact path='/' component={ Main } />
    <Route exact path='/services' component={ Services } />
</PublicLayout>

【讨论】：

【解决方案2】：

我不确定你为什么使用PublicLayout，你不能在Route 中使用Route。

在BrowserRouter 中创建PublicLayout 作为子级。 `

<BrowserRouter>
  <div className="App">
    <Route exact path="/" component={Main} />
    <Route exact path="/services" component={Services} />
  </div>
</BrowserRouter>

【讨论】：

【解决方案3】：

找到答案here。由于 React v4 封装了组件，因此您不再将 Routes 放在另一个 Route 中，您将 Routes 直接放在组件中。

<Router>
    <MyLayout>
      <Route path='/abc' component={ABC} />
      <Route path='/xyz' component={XYZ} />
    </MyLayout>
</Router>

【讨论】：