首先是根页面的编写:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
// Switch,
Route,
Link
} from "react-router-dom";
import './assets/css/App.css';
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
import Content from './components/Content';
import ProductContent from './components/ProductContent';
import User from './components/User';
import Shop from './components/Shop';
class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
//render 模板 jsx
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页</Link>
{/* <Link to="/news">新闻</Link> */}
{/* <Link to="/product">商品</Link> */}
<Link to="/user">用户界面</Link>
<Link to="/shop">商户</Link>
</header>
<Route exact path="/">
<Home />
</Route>
<Route path="/news">
<News />
</Route>
<Route path="/product">
<Product />
</Route>
<Route path="/user">
<User />
</Route>
<Route path="/content/:aid" component={Content} />
<Route path="/productcontent" component={ProductContent} />
<Route path="/shop" component={Shop} />
</div>
</Router>
)
}
}
export default App;
在components下新建了两个文件夹,分别是Shop类和User类,是商户shop.js和用户界面User.js的子页面存放的地方。
Shop.js:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
// Switch,
Route,
Link
} from "react-router-dom";
import ShopAdd from './Shop/ShopAdd'
import ShopList from './Shop/ShopList'
class Shop extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个商户组件'
};
}
render() {
return (
<div className="shop">
<div className="content">
<div className="left">
<Link to="/shop/">商户列表</Link>
<br />
<br />
<Link to="/shop/add">增加商户</Link>
</div>
<div className="right">
<Route exact path={`${this.props.match.url}/`} component={ShopList} />
<Route path={`${this.props.match.url}/add`} component={ShopAdd} />
</div>
</div>
</div>
);
}
}
export default Shop;
User.js:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
// Switch,
Route,
Link
} from "react-router-dom";
// const axios = require('axios');
import Info from './User/Info'
import Main from './User/Main'
class User extends Component {
constructor(props) {
super(props);
this.state = {
msg: '我是一个User组件'
};
}
render() {
return (
<div className="user">
<div className="content">
<div className="left">
<Link to="/user/">个人中心</Link>
<br />
<br />
<Link to="/user/info">用户信息</Link>
</div>
<div className="right">
<Route exact path="/user/" component={Main} />
<Route path="/user/info" component={Info} />
</div>
</div>
</div>
);
}
}
export default User;
而他们简单的子页面:
商户列表ShopList.js:
import React, { Component } from 'react';
class ShopList extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是商品列表组件'
};
}
render() {
return (
<div className="shop">
增加列表
</div>
);
}
}
export default ShopList;
商户增加ShopAdd.js:
import React, { Component } from 'react';
class ShopAdd extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div className="shop">
增加商户
</div>
);
}
}
export default ShopAdd;
用户个人中心Main.js:
import React, { Component } from 'react';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是个人信息'
};
}
render() {
return (
<div className="main">
我是个人中心组件
</div>
);
}
}
export default Main;
用户信息Info.js:
import React, { Component } from 'react';
class Info extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是用户信息'
};
}
render() {
return (
<div className="info">
我是用户信息组件
</div>
);
}
}
export default Info;
在User.js中用到的content样式
/*左右分栏*/
.content{
width: 100%;
height: 500px;
display: flex;
}
.content .left{
width: 200px;
height: 500px;
background: #eeee;
}
.content .right{
flex: 1;
height: 500px;
border: 1px solid #000;
}