Skip to content

马贞晓 / templateReact

Go to a project
Commit 2f02f1e7 by 马贞晓
Options

路由调整

1 parent 8f1df021
Inline Side-by-side
Showing 5 changed files with 61 additions and 48 deletions
package.json
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
"react-dom": "^16.11.0", "react-dom": "^16.11.0",
"react-redux": "^7.1.3", "react-redux": "^7.1.3",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-transition-group": "^4.3.0",
"redux": "^4.0.4", "redux": "^4.0.4",
"resolve": "1.12.0", "resolve": "1.12.0",
"resolve-url-loader": "3.1.0", "resolve-url-loader": "3.1.0",
......
src/component/layout/App.js
...@@ -15,10 +15,13 @@ const { Header, Content, Footer, Sider } = Layout; ...@@ -15,10 +15,13 @@ const { Header, Content, Footer, Sider } = Layout;
render(){ render(){
return <Provider store={store}> return <Provider store={store}>
<Router> <Router>
<Layout className="h100"> <Layout className="h100">
<Header className="header"> <Header className="header">
<LayoutHeader title="头部" /> <LayoutHeader title="头部" />
</Header> </Header>
<Content style={{ padding: '0 50px',display:"flex"}}> <Content style={{ padding: '0 50px',display:"flex"}}>
...@@ -39,6 +42,7 @@ const { Header, Content, Footer, Sider } = Layout; ...@@ -39,6 +42,7 @@ const { Header, Content, Footer, Sider } = Layout;
<Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer> <Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer>
</Layout> </Layout>
</Router> </Router>
</Provider> </Provider>
} }
} }
......
src/component/layout/LayoutSlide.js
import React,{Component} from 'react' import React,{Component} from 'react'
import { Menu, Icon } from 'antd'; import { Menu, Icon } from 'antd';
import {Link} from "react-router-dom"; import {Link,withRouter} from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
const { SubMenu } = Menu; const { SubMenu } = Menu;
export default class LayoutSlide extends Component{ export default class LayoutSlide extends Component{
state={
defaultSelectedKeys:[0],
defaultOpenKeys:[0],
MenuList:[
{title:"test1",children:[
{ title:"test1-1",path:"/index"}, { title:"test1-2",path:"/index2"},{ title:"test1-3",path:"/"}
]},
{title:"test1",children:[
{ title:"test1-1",path:"/index"},{ title:"test1-2",path:"/index2"},{ title:"test1-3",path:"/"}
]}
]
}
componentWillMount(){ componentWillMount(){
console.log(this.props); console.log("slides",this.props);
} }
render(){ render(){
let {defaultSelectedKeys,defaultOpenKeys,MenuList} =this.state;
return <Menu return <Menu
mode="inline" mode="inline"
defaultSelectedKeys={['1']} defaultSelectedKeys={defaultSelectedKeys}
defaultOpenKeys={['sub1']} defaultOpenKeys={defaultOpenKeys}
style={{ height: '100%' }}> style={{ height:"100%" }}
<SubMenu
key="sub1"
title={
<span>
<Icon type="user" />
</span>
}
> >
<Menu.Item key="1"><Link to="/index2">index2</Link></Menu.Item> {
<Menu.Item key="2"><Link to="/">index</Link></Menu.Item> MenuList.map((item,ind)=>{
<Menu.Item key="3">option3</Menu.Item> return <SubMenu key={'SubMenu_'+ind} title={<p><Icon type="mail" /><span>{item.title}</span></p>}>
<Menu.Item key="4">option4</Menu.Item> {
</SubMenu> item['children']&&item['children'].map((el,cind)=>{
<SubMenu return <Menu.Item key={'MenuItem_'+cind}><Link to={el.path}>{el.title}</Link></Menu.Item>
key="sub2" })
title={
<span>
<Icon type="laptop" />
subnav 2
</span>
} }
>
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu> </SubMenu>
<SubMenu })
key="sub3"
title={
<span>
<Icon type="notification" />
subnav 3
</span>
} }
>
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu> </Menu>
} }
} }
\ No newline at end of file \ No newline at end of file
src/router/index.js
...@@ -25,10 +25,11 @@ componentWillMount(){ ...@@ -25,10 +25,11 @@ componentWillMount(){
return <Switch> return <Switch>
{ {
List.map((item,ind)=>{ List.map((item,ind)=>{
return <Route exact path={item.path} key={ind}> return <Route exact path={item.path} key={ind} render={(props)=>(
<Suspense fallback={Load()}> <Suspense fallback={Load()}>
<item.component /> <item.component {...props} />
</Suspense> </Suspense>)}>
</Route> </Route>
}) })
} }
......
yarn.lock
...@@ -801,7 +801,7 @@ ...@@ -801,7 +801,7 @@
dependencies: dependencies:
regenerator-runtime "^0.13.2" regenerator-runtime "^0.13.2"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5": "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
version "7.7.2" version "7.7.2"
resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.7.2.tgz?cache=0&sync_timestamp=1573083187206&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a" resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.7.2.tgz?cache=0&sync_timestamp=1573083187206&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
dependencies: dependencies:
...@@ -2935,7 +2935,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1: ...@@ -2935,7 +2935,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
dependencies: dependencies:
cssom "0.3.x" cssom "0.3.x"
csstype@^2.2.0: csstype@^2.2.0, csstype@^2.6.7:
version "2.6.7" version "2.6.7"
resolved "https://registry.npm.taobao.org/csstype/download/csstype-2.6.7.tgz?cache=0&sync_timestamp=1570215695802&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcsstype%2Fdownload%2Fcsstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" resolved "https://registry.npm.taobao.org/csstype/download/csstype-2.6.7.tgz?cache=0&sync_timestamp=1570215695802&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcsstype%2Fdownload%2Fcsstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
...@@ -3188,6 +3188,13 @@ dom-converter@^0.2: ...@@ -3188,6 +3188,13 @@ dom-converter@^0.2:
dependencies: dependencies:
utila "~0.4" utila "~0.4"
dom-helpers@^5.0.1:
version "5.1.3"
resolved "https://registry.npm.taobao.org/dom-helpers/download/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
dependencies:
"@babel/runtime" "^7.6.3"
csstype "^2.6.7"
dom-matches@>=1.0.1: dom-matches@>=1.0.1:
version "2.0.0" version "2.0.0"
resolved "https://registry.npm.taobao.org/dom-matches/download/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c" resolved "https://registry.npm.taobao.org/dom-matches/download/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
...@@ -8017,6 +8024,15 @@ react-slick@~0.25.2: ...@@ -8017,6 +8024,15 @@ react-slick@~0.25.2:
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"
resize-observer-polyfill "^1.5.0" resize-observer-polyfill "^1.5.0"
react-transition-group@^4.3.0:
version "4.3.0"
resolved "https://registry.npm.taobao.org/react-transition-group/download/react-transition-group-4.3.0.tgz?cache=0&sync_timestamp=1567691870257&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-transition-group%2Fdownload%2Freact-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react@^16.11.0: react@^16.11.0:
version "16.11.0" version "16.11.0"
resolved "https://registry.npm.taobao.org/react/download/react-16.11.0.tgz?cache=0&sync_timestamp=1573172519929&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb" resolved "https://registry.npm.taobao.org/react/download/react-16.11.0.tgz?cache=0&sync_timestamp=1573172519929&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!