[JavaScript知识库]react动态路由的使用，二级三级页面的实际应用

这个只有粉丝能看，所以知道啥意思就行，组件名，大解释什么的就不改了。（不要问为什么，懒！）

先说一下需求：首页跳到列表页，列表页里面有通过页面和未通过页面，还有一个其他页面。通过页面里有一个通过详情页，未通过里只显示未通过信息，其他页面里有两个选项，可以跳到选项一和选项二页面。

注意：第三方页面使用路由信息用withRouter，路由信息match方法。打印match可以给你帮助

这里写一下地址栏的需求：

list                     列表页
list/tong                列表通过页
list/tong/tongdetail     通过的详情页
list/notong??            未通过页
list/qita                其他页面
list/qita/qi1            其他一页面
list/qita/qi2            其他二页面

App.js路由配置

<Route exact path="/list" component={Ce} />
<Route exact path={`/list/:page`} component={Ce} />
<Route path={`/list/:page/:id`} component={Ce} />

先说一下list页面，我定义的是 ceshi.jsx： To为通过页，Bu为未通过页，Qi为其他页面

不通过页面什么都没有，随意写。下面继续写通过和其他页面代码

import React, { Component } from 'react';
import To from './tong.jsx'
import Bu from './bu.jsx'
import Qi from './Qi'
import { NavLink } from 'react-router-dom';

class View extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    ifPage(params) {
        switch (params.page) {
            case 'tg':
                return <To id={params.id} />
            case 'ntg':
                return <Bu />
            case 'qi':
                return <Qi />
            default:
                return (
                    <div>
                        <h3>这是list页面</h3>
                        <NavLink to='list/tg'>通过</NavLink>
                        <br />
                        <NavLink to='list/ntg'>不通过</NavLink>
                        <br />
                        <NavLink to='list/qi'>进入其他页面</NavLink>
                    </div>
                )
        }
    }
    render() {
        const { match } = this.props
        // console.log(match)
        return (
            <React.Fragment>

                {this.ifPage(match.params)}

            </React.Fragment>
        );
    }
}

export default View;

通过页：我定义为tong.jsx：在此地址栏下后续任意输入都将跳到通过详情页。

详情页代码什么也没有，自己随意定义

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import TD from './tongdetail'
class tong extends Component {
    constructor(props) {
        super(props)
    }

    ifPage(id) {
        if (id) {
            return <TD id={id} />
        } else {
            return <div>这是：通过页面</div>
        }
    }
    render() {
        return (
            <React.Fragment>
                {this.ifPage(this.props.id)}
            </React.Fragment>
        );
    }
}

export default withRouter(tong);

?接下来就是其他页面，里面有两个导航跳向其他一，其他二。那两个页面也是自己随意定义

import React, { Component } from 'react';
import { withRouter, NavLink } from 'react-router-dom';
import Qa from './Qi1'
import Qb from './Qi2'

class Q extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }
    ifPage(params) {
        // console.log(params)
        switch (params.id) {
            case 'qa':
                return <Qa id={params.id}></Qa>
            case 'qb':
                return <Qb></Qb>
            default:
                return (
                    <div>
                        <div>这是其他页面，里面有俩选项页面</div>
                        <NavLink to='qi/qa'>去one</NavLink>
                        <br />
                        <NavLink to='qi/qb'>去two</NavLink>
                    </div>
                )
        }
    }
    render() {
        const { match } = this.props
        // console.log(match)
        return (
            <div>
                {this.ifPage(match.params)}
            </div>
        );
    }
}

export default withRouter(Q);

?这样一个动态二级三级就可以实现啦。后续自己添加可以根据代码改动

关注博主即可阅读全文