react-router 4嵌套布局

作者: MJ 分类: react 发布时间: 2019-04-04 17:46

今天看到一篇文章主要是讲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)的作者。

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注