文章目录
一、摘要
1.需求
跟路由
首页 用户中心 商户
个人中心 商户列表
用户信息 增加商户
2.父路由里配置嵌套路由
import { Route, Link } from "react-router-dom";
<div className="pageCon">
<div className="pageLeft">
<Link to="/user/main">个人中心</Link>
<Link to="/user/info">用户信息</Link>
</div>
<div className="pageRight">
<Route exact path="/user/" component={Main} />
<Route path="/user/main" component={Main} />
<Route path="/user/info" component={Info} />
</div>
</div>
二、简单的路由嵌套例子
1.根路由-App.js
import './assets/css/index.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// 引入组件
import Home from './components/Home'
import User from './components/User'
import Shop from './components/Shop'
function App() {
return (
<Router>
<div className="header">
<Link to="/">首页</Link>
<Link to="/user">用户中心</Link>
<Link to="/shop">商户</Link>
</div>
<Route exact path="/" component={Home} />
<Route path="/user" component={User} />
<Route path="/shop" component={Shop} />
</Router>
);
}
export default App;
2.父路由-User.js
import React from 'react';
import { Route, Link } from "react-router-dom";
import Info from './User/Info';
import Main from './User/Main';
class User extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div className='pagewrap'>
<div className="pageCon">
<div className="pageLeft">
<Link to="/user/main">个人中心</Link>
<Link to="/user/info">用户信息</Link>
</div>
<div className="pageRight">
<Route exact path="/user/" component={Main} />
<Route path="/user/main" component={Main} />
<Route path="/user/info" component={Info} />
</div>
</div>
</div>
)
}
}
export default User;
3.子路由-info
@file(User/Info.js)
import React from 'react';
class Info extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<div>
<h1>我是Info</h1>
</div>
)
}
}
export default Info;
4.样式
*{padding:0;margin:0;box-sizing: border-box;}
html,body{width: 100%;height: 100%;}
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul,ol,li { list-style:none; }
body {font-size :14px;font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
a {color: #000;text-decoration:none ;display:inline-block}
a:link{text-decoration:none ;color: #000;}
a:hover{text-decoration:none ;cursor: pointer;margin-bottom: 0px;color: #000;}
a:active{color: #000;}
a:focus{outline: none;color: #000;}
textarea{resize: none;outline: none;padding: 5px;line-height: 20px;}
dl dt{font-weight: 500;}
label{font-weight: 500;margin: 0;}
input{padding:0 10px;font-size: 14px;}
button{font-size: 14px;}
table{font-size: 14px;}
.clearfix:after{content:"";display:block;height:0;clear:both;overflow:hidden;visibility:hidden}
.clearfix{zoom:1}
/* 常用样式 集合 */
.floatL, .fl{float: left;}
.floatR, .fr{float: right;}
.relative{position:relative}
.absolute{position: absolute;}
.boxsizing{box-sizing:border-box}
.txtellipsis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/*显示省略号*/
.pagewrap{
}
.header{
display: flex;
height: 60px;
line-height: 60px;
padding: 0 20px;
background: #000;
}
.header a{
color: #fff;
margin-right: 30px;
}
.pageCon{
display: flex;
}
.pageLeft{
width: 200px;
height: 100vh;
background: #f0f0f0;
}
.pageRight{
flex: 1;
background: #f5f5f5;
}
.pageLeft{
padding-top: 30px;
}
.pageLeft a{
display: block;
width: 100%;
line-height: 30px;
padding-left: 15px;
}
三、模块化路由嵌套例子
1.摘要
将上述例子中的路由配套抽离出组件,
// 2.难点
在app.js中根路由传参
<Route key={key} exact={route.exact} path={route.path}
render={props => (
<route.component {...props} routes={route.routes} />
)}
/>
// 3.例子中的路由解构
User - UserList,UserAdd
2.例子
1.route.js-配置所有的路由
import Home from '../components/Home';
import User from '../components/User';
import UserList from '../components/User/UserList';
import UserAdd from '../components/User/UserAdd';
import UserEdit from '../components/User/UserEdit';
import Shop from '../components/Shop';
import News from '../components/News';
let routes = [
{
path: '/',
component: Home,
exact: true
},
{
path: '/user',
component: User,
routes: [
{
path: '/user/',
component: UserList,
exact: true
},
{
path: '/user/list',
component: UserList,
},
{
path: '/user/add',
component: UserAdd,
},
{
path: '/user/edit',
component: UserEdit,
},
]
},
{
path: '/shop',
component: Shop,
},
{
path: '/news',
component: News,
},
]
export default routes;
2.根路由-App.js(难点:跟路由传参)
import './assets/css/index.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import routes from './model/router';
function App() {
return (
<Router>
<div className="header">
<Link to="/">首页</Link>
<Link to="/user">用户中心</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</div>
{
routes.map((route, key) => {
return (
<Route key={key} exact={route.exact} path={route.path}
render={props => (
<route.component {...props} routes={route.routes} />
)}
/>
)
})
}
</Router>
);
}
export default App;
3.父路由-User.js
import React from 'react';
import { Route, Link } from "react-router-dom";
class User extends React.Component{
constructor(props){
super(props);
this.state = {}
}
componentDidMount(){
let routes = this.props.routes;
this.setState({routes: routes});
}
render(){
return(
<div className='pagewrap'>
<div className="pageCon">
<div className="pageLeft">
<Link to="/user/list">用户列表</Link>
<Link to="/user/add">用户增加</Link>
<Link to="/user/edit">用户修改</Link>
</div>
<div className="pageRight">
{
this.props.routes.map((route,key)=>{
return <Route key={key} exact={route.exact} path={route.path} component={route.component} />
})
}
</div>
</div>
</div>
)
}
}
export default User;
4.子路由
很简单,不赘述
@file(User/UserList)
import React from 'react';
class UserList extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<div>
<h1>我是UserList</h1>
</div>
)
}
}
export default UserList;