最近在学习react这个框架，昨天在子路由嵌套这里快要搞疯了，也有自己急于求成的缘故吧，在网上搜索了好的技术文章，整了一天，总算搞出来了。决定记录下来，下次可以看看
首先我这里是打算用 官方脚手架跟 Antd UI框架搭建一个后台管理界面
好了，上代码了
我的项目结构是这样的
App.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Layout from './components/Layout';
import Login from './components/Login';
export default class CRouter extends Component {
render() {
return (
<div>
<Router>
<Switch>
<Route exact path='/' component={Login}/>
<Route path='/app' component={Layout}/>
<Route path='/login' component={Login}/>
</Switch>
</Router>
</div>
)
}
}
|
然后的话就是一级登录页路由了 Login.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import React from 'react';
import { Button } from 'antd';
class NormalLoginForm extends React.Component {
handleSubmit (){
this.props.history.push('/app/first');
}
render() {
return (
<div>
<Button type="primary" onClick={this.handleSubmit.bind(this)} className="login-form-button">
Log in
</Button>
</div>
);
}
}
export default NormalLoginForm;
|
同样一级路由 Layout.js 这里的话是后台页面的主页，用来嵌套子路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import React from 'react';
import {Layout, Menu, Icon} from 'antd';
import FirstPage from './FirstPage';
import SecondPage from './SecondPage';
import {Route, Link, Switch} from 'react-router-dom';
const {Header, Sider, Content} = Layout;
class SiderDemo extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render() {
return (
<Layout>
<Sider
trigger={null}
collapsible
collapsed={this.state.collapsed}
>
<div className="logo"/>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
<Icon type="user"/>
<Link to={'/app/first'}>First</Link>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera"/>
<Link to={'/app/second'}>second</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{background: '#fff', padding: 0}}>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
</Header>
<Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>
<Switch>
<Route path="/app/first" component={FirstPage}/>
<Route path="/app/second" component={SecondPage}/>
</Switch>
</Content>
</Layout>
</Layout>
);
}
}
export default SiderDemo;
|
好了，然后就是子路由了 FirstPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import React from 'react';
class FirstPage extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render() {
return (
<div>这是第一个页面</div>
);
}
}
export default FirstPage;
|
子路由 SecondPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import React from 'react';
class SecondPage extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render() {
return (
<div>这是第二个页面</div>
);
}
}
export default SecondPage;
|
这样就可以了
demo地址 https://gitee.com/wxialexiatian/summer__reactrouter4master
借鉴自：https://www.cnblogs.com/fengly0503/p/7823167.html
