版权声明:原创转载请注明出处,谢谢合作! https://blog.csdn.net/zhongqw_00/article/details/81280053
- 入口文件
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>
)
}
}
持续更新中…….