Question

./ index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter } from 'react-router-dom';
    import App from './App';    

    ReactDOM.render(
          <BrowserRouter basename={baseUrl}>
            <App />
          </BrowserRouter>,
          rootElement);

./ App.js

import { Route } from 'react-router';
    return (
        <div>
            <Layout>
              <Route exact path='/' component={Auth} />
            </Layout>
            <Home>
              <Route path='/home' component={Sample} />
              <Route path='/test' component={Sample1} />
             </Home>
        </div>
    )

Layout.jsx

import React, { Component } from 'react';

export class Layout extends Component {
    displayName = Layout.name
    render() {
      return (
        <div>
            {this.props.children}
        </div>
    );
  }
}

Home.jsx

import React, { Component } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import Top from '../components/menu/Top';

export class Home extends Component {
    render() {
        return (
            <div>
                <Top />
                <Grid fluid>
                    <Row>
                        <Col sm={12}>
                            {this.props.children}
                        </Col>
                    </Row>
                </Grid>
            </div>
        );
    }
}

我想为不同的组件使用不同的布局，我尝试，但它没有成功，我做错了什么？最糟糕的部分是有很多不同的样本，没有一个是有效的更新了图片，不同的是1顶部栏和1没有，登录页面不应该出现在顶部栏，而另外2个在家里应该共享顶部，但我找不到任何工作样本

Answer 1

很难从上面的代码中看到或看到您用来生成屏幕截图的网址。

我建议在Route组件中移动Home和Layout并构建UI。目前，即使他们的孩子不这样做，组件也会呈现。

尝试在Auth。

中移动Sample in Sample和Sample1 and Layout

ReactJS路由不同的布局

1 个答案: