2-2 首页组件的拆分

2-1 中我们引入了react 路由。(src/App.js )代码如下。

class App extends Component {
  render() {
    return (
      <div>
        <GlobalStyle />
        <Provider store={store}>
        <div>
          <Header />
          <BrowserRouter>
            <Route path='/' exact render={() => <div>home</div>}></Route>
            <Route path='/detail' exact render={() => <div>detail</div>}></Route>
          </BrowserRouter>
        </div>
        </Provider>
      </div>
    );
  }
}

其中，BrowserRouter 表示路由，Route 表示路由规则。当路径匹配到“/” 时，就会显示 home；当路径匹配“/detail” 时，就会显示detail。

接下来，我们要换一种形式，对路由规则进行升级。

首先，在src 目录下，新建一个目录 pages。然后，在pages 目录下新建两个目录： home, detail。

然后，在src/pages/home 目录下，新建一个文件 index.js，如下。

import React, {Component} from 'react';

class Home extends Component {
    render () {
        return (
            <div>home home</div>
        )
    }
}

export default Home;

同样，在 src/pages/detail 下也新建 index.js 也写入相同初始化代码。

这样的话，我们就有了两个组件 Home Detail 。

我们希望，当访问“/” 时，访问的是 Home 组件；当访问“/detail”时，访问的是 Detail 组件。

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { GlobalStyle } from './style.js';
import Header from './common/header';
import store from './store/index';
import Home from './pages/home';
import Detail from './pages/detail';

class App extends Component {
  render() {
    return (
      <div>
        <GlobalStyle />
        <Provider store={store}>
        <div>
          <Header />
          <BrowserRouter>
            <Route path='/' exact component={Home}></Route>
            <Route path='/detail' exact component={Detail}></Route>
          </BrowserRouter>
        </div>
        </Provider>
      </div>
    );
  }
}

export default App;

好的，那么我们先来写一下 home 首页的一个基本样式。

在 src/page/home 目录下，新建文件 style.js，如下。

import styled from 'styled-components';

export const HomeWrapper = styled.div`
    width: 960px;
    height: 300px;
    margin: 0 auto;
    background: red;
`;

然后在 src/page/home 下 index 中引入，代码如下。

import React, {Component} from 'react';
import {HomeWrapper} from './style';

class Home extends Component {
    render () {
        return (
            <HomeWrapper>

            </HomeWrapper>
        )
    }
}

export default Home;

然后这个首页，分为左边和右边，两个部分。如下。

import styled from 'styled-components';

export const HomeWrapper = styled.div`
    overflow: hidden;
    width: 960px;
    margin: 0 auto;
`;

export const HomeLeft = styled.div`
    margin-left: 15px;
    padding-top: 30px;
    width: 625px;
    float: left;
`;

export const HomeRight = styled.div`
    width: 240px;
    float: right;
`;

index 中如下。

import React, {Component} from 'react';
import {HomeWrapper, HomeLeft, HomeRight } from './style';

class Home extends Component {
    render () {
        return (
            <HomeWrapper>
                <HomeLeft></HomeLeft>
                <HomeRight></HomeRight>
            </HomeWrapper>
        )
    }
}

export default Home;

然后，我们把这个 Home 组件 又拆分为几个小组件。

在 src/pages/home 目录下，创建一个目录 components 。在这儿我们会写一些 Home 下的小组件。然后我们在这个 components 目录下创建四个 Home 的小组件：Topic.js, List.js , Recommend.js, Writer.js。

然后在 src/pages/home 下的 index.js 中分别引入进去，如下。

import React, {Component} from 'react';
import {HomeWrapper, HomeLeft, HomeRight } from './style';
import List from './components/List';
import Recommend from './components/Recommend';
import Topic from './components/Topic';
import Writer from './components/Writer';
import bannerImage from '../../statics/ooo.jpg';

class Home extends Component {
    render () {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className="banner-img" src={bannerImage} />
                    <Topic></Topic>
                    <List></List>
                </HomeLeft>
                <HomeRight>
                    <Recommend></Recommend>
                    <Writer></Writer>
                </HomeRight>
            </HomeWrapper>
        )
    }
}

export default Home;