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>)}
}

持续更新中…….

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

vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...
Koa入门（一）—— Koa项目基础框架搭建
Koa项目基础框架搭建项目初始化项目自动重启配置ES6语法基本目录搭建配置env信息自动加载路由统一异常处理自定义异常异常处理中间件中间件配置目录别名配置项目初始化 mkdir ...
原生微信小程序项目基础框架搭建
原生微信小程序项目基础框架搭建文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换接口的url webview的前缀url 埋点相关的环境参数本地存储的环境变量配置 ...
Maven搭建多模块企业级项目+SSM框架搭建
一.开发环境: 0.Eclipse Java EE IDE for Web Developers: /Version: 2018-09 (4.9.0) / Build id: 20180917- ...
php ci url,URL路由设置-CI(codeigniter)PHP框架再探
前面文章整体说了一下Codeigniter的访问,其中涉及到route,URL路由设置,下面对CI再说一下在application/config/文件夹下有routes.php的设置. 1.首先说U ...
一、友录项目框架搭建
1,概况: 首先简单介绍本项目的概况,友录,即通讯录管理APP,其功能有四个: 一.通话记录:记录和联系人的通话: 二.联系人:联系人的查询,添加,删除,修改: 三.短信:与联系人的短信往来: 四.拨 ...
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
SSM框架搭建（四） springmvc和mybatis的配置
SSM框架搭建(一) JDK和MAVEN环境搭建 SSM框架搭建(二) 创建MAVEN项目 SSM框架搭建(三) 数据库创建和MyBatis生成器自动生成实体类.DAO接口和Mapping映射文件 S ...
（一）框架搭建，前端路由设置，自定义寻找指定路径（Django+Vue+Mysql，数据库管理数据分析网站）
从零开始,1周内搭建出内含复杂深度学习作图分析功能的网站,很肝,但是很有收获,问了很多大佬,查了很多资料,碰了很多壁,写了很多代码,测试,学习,趁着刚做完,写文章总结复盘一下,我尽量以我喜欢的通俗的逻 ...
Dubbo+Flutter在线交友平台教程第一天项目介绍和框架搭建
课程介绍 <探花交友> 功能介绍项目介绍工程搭建短信验证码实现用户登录功能 1.功能介绍探花交友是一个陌生人的在线交友平台,在该平台中可以搜索附近的人,查看好友动态,平台还会通过 ...

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

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

最新文章

热门文章