react-router 4嵌套布局
今天看到一篇文章主要是讲react router4的文档,其实4.0所有的api都很简单,也更好理解,但是这篇文章主要是讲用组件化的思想来实现嵌套布局(这个其实跟vue的嵌套路由很像,突然想起来,学会了react再去看vue相对的更容易理解,反过来也是成立的,哈哈)
先贴上中文和英文的地址,喜欢看原文的朋友可以直接去看了,但是原文我看了好几遍才彻底明白,可能是我太笨了,哈哈。
中文:https://www.jianshu.com/p/bf6b45ce5bcc
英文(原文):https://css-tricks.com/react-router-4/
以下才是我理解:
主要说一下嵌套布局,文章前边说的几个api跟3.0的对比都比较简单,就不细说了。
我们想像一下这样的一种布局,我们的页面中有一个这样的tab布局,有3个tab,这3个tab中有公共的部分和不同的部分(如下图)
我们按常规的思路来实现可能会这样写:
import React, { Component, Fragment } from 'react';
import {Switch , Route,Link} from 'react-router-dom';
const User = () => {
return (
<Fragment>
<h1>user</h1>
<p>我是user组件</p>
</Fragment>
)
}
const UserInfo1 = () => {
return(
<p>我是【添加】组件</p>
)
}
const UserInfo2 = () => {
return(
<p>我是【编辑】组件</p>
)
}
const User1 = () => {
return (
<Fragment>
<h1>user</h1>
<p>我是user组件</p>
<UserInfo1 />
</Fragment>
)
}
const User2 = () => {
return (
<Fragment>
<h1>user</h1>
<p>我是user组件</p>
<UserInfo2 />
</Fragment>
)
}
class RouterMode extends Component{
render(){
return(
<div>
<Link to="/router/user">user</Link>
<Link to="/router/user/add">添加</Link>
<Link to="/router/user/123/edit">编辑</Link>
<Switch>
<Route path="/router" component={User}></Route>
<Route path="/router/:userId" component={User1}></Route>
<Route path="/router/:userId/edit" component={User2}></Route>
</Switch>
</div>
)
}
}
export default RouterMode;
很容易看到,User1 和 User2组件 的布局是重复的,每次渲染子页面的时候,都会渲染整体的布局。如果项目比较大的话,会产生很多重复冗余的代码,也会影响整体的性能 。
那就看一下作者推荐的写法:
import React, { Component, Fragment } from 'react';
import {Switch , Route,Link} from 'react-router-dom';
const UserInfo1 = () => {
return(
<p>我是不同的组件:详情111111111111111</p>
)
}
const UserInfo2 = () => {
return(
<p>我是不同的组件:详情2222222222222222</p>
)
}
const UserSubLayout = ({match}) => {
return (
<Fragment>
<h1>user</h1>
<p>我是user组件</p>
<Switch>
<Route path={`${match.path}/add`} exact component={UserInfo1} />
<Route path={`${match.path}/:userId/edit`} component={UserInfo2} />
<Route path={`${match.path}/:userId`} component={UserInfo2} />
</Switch>
</Fragment>
)
}
class RouterMode extends Component{
render(){
console.log(this.props.match);
let { match } = this.props;
return(
<div>
<Link to={`${match.path}/user`}>user</Link>
<Link to={`${match.path}/user/add`}>添加</Link>
<Link to={`${match.path}/user/123/edit`}>编辑</Link>
<Switch>
<Route exact path={`${match.path}`} component={Info}></Route>
<Route path={`${match.path}/user`} component={UserSubLayout}></Route>
</Switch>
</div>
)
}
}
export default RouterMode;
其实我个人的理解就是Route的模块不在放同一个地方了,创建一个公共的组件(UserSubLayout),然后共享相同的地方,不同的地方用Route再去创建一下,看一下无状态组件UserSubLayout 中的Switch就明白了,就像我们写的组建一样,父组件–>子组件->孙组件->……
其实理解了组件的思想,也就更好的来理解router4.0的嵌套布局,关于代码中的match纯粹是为了动态的写路径,相信会react的朋友,能很好的理解match的用法,具体的就不细说了,大家可以去看原文中关于match的解释,也很简单。
感谢中文(一个笑点低的妹纸 )和英文(Brad Westfall)的作者。
欢迎关注小程序,感谢您的支持!