详情请点阅读全文
一、概述
实现功能：点首页，展示首页，同时在左侧有个首页的各个栏目导航；点用户，同首页；
二、代码实现
1. src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom';
import Home from './components/home';
import User from './components/user';
function App() {
return (
<Router>
<div>
<header className='header'>
<Link to='/'>首页</Link>
<Link to='user'>个人中心</Link>
</header>
<Route exact path="/" component={Home} />
<Route path="/user" component={User} />
</div>
</Router>
);
}
export default App;
|
src/App.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .header{
background-color:#000;
height: 50px;
padding-top: 5px;
padding-left: 5px;
}
.header a{
color: #fff;
margin-right: 10px;
height: 50px;
line-height: 50px;
}
|
2.【重点】src/components/user.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
| import React, { Component } from 'react';
import './css/user.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Main from './user/main.js';
import Info from './user/info';
class User extends Component {
constructor(props){
super(props);
this.state={}
}
render() {
return (
<Router>
<div className='user'>
<div className='left'>
<Link to='/user/'>个人中心</Link><br/>
<Link to='/user/info'>个人信息</Link>
</div>
<div className='right'>
{}
<Route exact path={`${this.props.match.url}/`} component={Main} />
<Route path='/user/info' component={Info} />
</div>
</div>
</Router>
);
}
}
export default User;
|
src/components/css/user.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .user{
width:100%;
height: 800px;
display:flex;
}
.user .left{
width:200px;
height: 800px;
background-color: antiquewhite;
border: 1px solid rgb(189, 71, 71);
padding-left: 20px;
padding-top: 50px;
}
.user .right{
-webkit-flex: 1;
flex:1;
height: 800px;
background-color: #eee;
border: 1px solid rgb(170, 43, 43);
}
|
3.src/components/user/main.js、info.js
3.1 main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import React, { Component } from 'react';
class Main extends Component {
constructor(props){
super(props);
this.state={}
}
render() {
return (
<div>
这里是个人中心主页
</div>
);
}
}
export default Main;
|
3.2 info.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import React, { Component } from 'react';
class Info extends Component {
constructor(props){
super(props);
this.state={}
}
render() {
return (
<div>
这里是个人信息中心
</div>
);
}
}
export default Info;
|
4.src/components/home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import React, { Component } from 'react';
class Home extends Component {
constructor(props){
super(props);
this.state={ }
}
render() {
return (
<div>
这里是首页
</div>
);
}
}
export default Home;
|
5.效果
从首页点到个人中心后，再点左侧导航，可跳转到对应信息处