cNode------路由设置以及项目基本框架搭建

• 入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';//缓存文件
import {BrowserRouter} from 'react-router-dom';//或者使用HashRouter作跳转也是可以的

ReactDOM.render(<BrowserRouter>
                      <App />
                </BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

• 使用路由建立框架，实现页面的跳转
  
  router/index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom'
import {Switch,Route,Redirect} from 'react-router-dom';//使用选择，路由，重定向。

import Index from "../view/index/index";
import Book from "../view/book/book";
import User from "../view/user/user";
import Details from "../view/details/details";
import About from "../view/about/about";

class RouterIndex extends Component{
    render(){
        return (
            <Switch>
                <Route path = "/" exact render={()=>(
                    <Redirect to = "/index"/>
                )}/>//严格匹配，当访问根目录下时跳转至index路由
                <Route path = "/index" component = {Index}/>
                <Route path = "/book" component = {Book}/>
                <Route path = "/about" component = {About}/>
                <Route path = "/details" component = {Details}/>
                <Route path = "/user" component = {User}/>
            </Switch>
        )
    };
}
export default RouterIndex;//导出模块

• index.js

import React, { Component } from 'react';

class Index extends Component {
    render() {
        return (
            <h1>首页！</h1>
        );
    }
}

export default Index;

• 导航main-header.js

import React,{Component} from 'react';
import Nav from './nav';//自己写的模块
//使用Layout布局，Row表示行，Col表示列，图标，下拉菜单，按钮
import {Layout,Row,Col,Divider,Icon,Dropdown,Button} from 'antd';

export default class mainHeader extends Component{
    render(){
        return (
            <Layout.Header>
                <Row className="wrap">//一行为24格
                    <Col md={6} xs={24}>//md规格下占行的6格，xs规格下占24格
                        <h1 id = "logo">cNode</h1>
                    </Col>
                    <Col md={18} xs={0}>
                        <Divider type="vertical" className="headerDivider"/>
                        <Nav mode = "horizontal" id = "nav"/>
                    </Col>
                    <Col md={0} xs={24} className="xsNav">
                        <Dropdown overlay={
                             <Nav mode="vertical" id="xsNav" />
                        }
                        placement = "bottomRight"
                        trigger = {["click","touchend"]}
                        >
                            <Button>
                                <Icon type="bars"/>
                            </Button>
                        </Dropdown>
                    </Col>
                </Row>
            </Layout.Header>
        );
    }
}

nav.js

import React,{Component} from 'react';
import {Link} from 'react-router-dom';//可以作跳转
import {Menu,Icon} from 'antd';

export default class Nav extends Component{
    render(){
        let {mode,id} = this.props;
        return(
            <div>
                <Menu mode = {mode} id = {id}>
                    <Menu.Item>
                        <Link to="/index"><Icon type = "home"/>首页</Link>
                    </Menu.Item>
                    <Menu.Item>
                        <Link to="/book"><Icon type = "book"/>教程</Link>
                    </Menu.Item>
                    <Menu.Item>
                        <Link to="/about"><Icon type="info-circle-o" />关于</Link>
                    </Menu.Item>
                </Menu>
            </div>
        )
    }
}

持续更新中…….