创建侧导航栏

下面是效果图

image.png

第一步：二级路由将组件和导航连接在一起

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import style from './style.scss';
import Nav from './nav';
import Content from './contant';
import Center from './center';
import Track from './track';
import Qiye from './qiye';

export default function index(props) {
    const {match} = props;
    return (
        <div  className={style.switchdiv}>
      
            <Switch>
                <Route  path={`${match.url}/center`}   render={
                    prop =>[
                        <Nav  key="1" {...prop} />,
                        <Content  key="2"><Center  {...prop} /> </Content>
                    ]
                }  />
                <Route  path={`${match.url}/track`}   render={
                    prop => [
                        <Nav  key="1"  {...prop}   />,
                        <Content  key="2"><Track  {...prop}  /> </Content>
                    ]
                }  />
                <Route  path={`${match.url}/qiye`}   render={
                    prop => [
                        <Nav  key="1"  {...prop}   />,
                        <Content  key="2"><Qiye  {...prop}  /> </Content>
                    ]
                }  />
                <Redirect  from={`${match.url}`}   to={`${match.url}/center`}  />
            </Switch>
        </div>
    );
}

第二步：左侧边可点击的导航

import React from 'react';
import  style from   './style.scss';
import {Link} from 'react-router-dom';
import {Icon} from 'antd';

const nav = [
    {   path: '/center',
        name: '消息中心',
        icon: <Icon type="message" theme="twoTone" twoToneColor="#E42426"/>
    },
    {   path: '/track',
        name: '服务跟踪',
        icon: <Icon type="fund" theme="twoTone" twoToneColor="#E42426"/>
    },
    {
        name: '企业认证',
        path: '/qiye',
        icon: <Icon type="book" theme="twoTone" twoToneColor="#E42426"/>
    }
];

export default function index(prop) {
    const {match}  = prop;
    return (
        <div   className={style.leftNav}>
          
            {
                nav.map(
                    p=><li  key={p.name}  className={ style.navItem + '  ' + (`${match.url}`.match(p.path) && style.active)  }   >
                        <Link   to={`/message${p.path}`} >
                            {p.icon}
                            {p.name}
                        </Link>
                    </li>
                )
            }
        </div>
    );
}

第三步：右边content框

import React from 'react';
import style from  './style.scss';
export default function index(props) {
    return (
        <div  className={style.contain}>
            {
                props.children
            }
        </div>
    );
}

image.png

第四步：创建子组件

import React from 'react';

export default function index() {
    return (
        <div>
            信用追踪
        </div>
    );
}

image.png