2 2 首頁元件的拆分

render() >

detail

}>

);}}

其中，browserrouter 表示路由，route 表示路由規則。當路徑匹配到「/」 時，就會顯示 home；當路徑匹配「/detail」 時，就會顯示detail。

接下來，我們要換一種形式，對路由規則進行公升級。

首先，在src 目錄下，新建乙個目錄 pages。然後，在pages 目錄下新建兩個目錄： home, detail。

然後，在src/pages/home 目錄下，新建乙個檔案 index.js，如下。

import react,  from 'react';

class home extends component 
}export default home;

這樣的話，我們就有了兩個元件 home detail 。

我們希望，當訪問「/」 時，訪問的是 home 元件；當訪問「/detail」時，訪問的是 detail 元件。

import react,  from 'react';

import from 'react-router-dom';
import from 'react-redux';
import from './style.js';
import header from './common/header';
import store from './store/index';
import home from './pages/home';
import detail from './pages/detail';
render() 
}

在 src/page/home 目錄下，新建檔案 style.js，如下。

import styled from 'styled-components';

width: 960px;
height: 300px;
margin: 0 auto;
background: red;
`;

import react,  from 'react';

class home extends component 
}export default home;

import styled from 'styled-components';

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;
`;

import react,  from 'react';

class home extends component 
}export default home;

在 src/pages/home 目錄下，建立乙個目錄 components 。在這兒我們會寫一些 home 下的小組件。然後我們在這個 components 目錄下建立四個 home 的小組件：topic.js, list.js , recommend.js, writer.js。

然後在 src/pages/home 下的 index.js 中分別引入進去，如下。

部落格 3 首頁 個人部落格詳情頁

自定義 tag，傳入引數，渲染left menu.html檔案，返回html檔案 匯入page main塊 from django import template from blog import models from django.db.models import count register ...

（TT五）首頁內容管理

知識點 1.樹形結構節點資料使用什麼樣的資料庫表來表示 淘淘 首頁 大廣告 小廣告 列表頁面 詳細頁面 解答 id 表示每個節點 parent id 儲存當前節點的父節點id name,status 當前節點的資訊，名稱一類 is parent 表示當前節點是否是父節點 createtime,upd...

Access 培訓管理系統 16 首頁

系統 windows 7 軟體 excel 2010 access 2010 培訓系統輸入和輸出已經完成 本文旨在增加乙個首頁，系統開啟預設顯示該頁面 首頁 動態效果 窗體內 private sub 輸出 click dim isfrmopen 判斷窗體是否已開啟 dim tofrm tofrm 培...