当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react嵌套路由

react嵌套路由

2020年04月16日  | 移动技术网IT编程  | 我要评论

1、结构目录

2、路由配置文件，参照的vue-router

config.js 

import login from '../view/login.js';
import system from '../view/system.js';
import bus from '../view/bus.js';
import bus22 from '../view/bus22.js';

const routes = [
  {
    path: "/",
    component: login,
    exact: true,
  },
  {
    path: "/system",
    component: system,
    auth:true,
    routes: [
      {
        path: "/system/bus",
        component: bus,
        exact: true,
        auth:true,
      },
      {
        path: "/system/bus22",
        component: bus22,
        exact: true,
        auth:true,
      },
    ]
  }
];
export default routes;

3、路由主体，使用react-router-dom，里面也有其它的例子和api 

import routes from './config';
import react, {component} from 'react';
import {
  browserrouter as router,
  switch,
  route,
  redirect,
} from "react-router-dom";

/*一级路由*/
class first extends component {
  render() {
    return (
      <router>
        <switch>
          {routes.map((route, i) => {
              if (route.auth) {//根据配置是否检测登录
                return (
                  <privateroute key={i} path={route.path}>
                    <route.component/>
                  </privateroute>
                )
              } else {
                return (<routewithsubroutes key={i} {...route} />)
              }
            }
          )}
        </switch>
      </router>
    );
  }
}
/*二级路由*/
class systemrouter extends component {
  render() {
    return (
        <switch>
          {routes[1].routes.map((route, i) => {
            if (route.auth) {//根据配置是否检测登录
              return (
                <privateroute  key={i} path={route.path}>
                  <route.component/>
                </privateroute>
              )
            } else {
              return (<routewithsubroutes key={i} {...route} />)
            }
          })}
        </switch>
    );
  }
}

export {
  first, systemrouter
};
// a special wrapper for <route> that knows how to
// handle "sub"-routes by passing them in a `routes`
// prop to the component it renders.
/*开放路由*/
function routewithsubroutes(route) {
  return (
    <route
      exact={route.exact}
      path={route.path}
      render={props => (
        // pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes}/>
      )}
    />
  );
}
/*登录检测路由*/
function privateroute({children, ...rest}) {
  let isauthenticated = sessionstorage.auth;
  return (
    <route
      {...rest}
      render={({location}) =>
        isauthenticated ? (
          children
        ) : (
          <redirect
            to={{
              pathname: "/",
              state: {from: location}
            }}
          />
        )
      }
    />
  );
}

4、一级路由的使用，在app.js 

import react from 'react';
import './app.css';
import {first} from './router/index';

function app() {
  return (
    <first/>
  );
}

export default app;

5、二级路由的使用，在一级路由的组件文件中，本例是system.js 

import react,{component} from 'react';
import {systemrouter} from '../router/index';
import {
  withrouter
} from "react-router-dom";
import { menu, icon } from 'antd';

const { submenu } = menu;
class system extends component  {
  componentdidmount() {

  }

  handleclick = e => {
    this.props.history.push(e.key)
  };
  render() {
    return (
      <div>
        <header>
          嵌套路由
        </header>
        <menu
          onclick={this.handleclick}
          style={{ width: 256,float:'left' }}
          defaultselectedkeys={['1']}
          defaultopenkeys={['sub1']}
          mode="inline"
        >
          <submenu
            key="sub1"
            title={
              <span>
              <icon type="mail" />
              <span>navigation one</span>
            </span>
            }
          >
            <menu.item key="/system/bus">bus</menu.item>
            <menu.item key="/system/bus22">bus22</menu.item>
          </submenu>
      
        </menu>
        <systemrouter  style={{ float:'left' }}/>
      </div>
    );
  }
}
export default withrouter(system);

最后来俩效果图，页面分三部分，头部、左侧导航、右侧内容，切换时只有右侧内容变化。

 

 

 

转自：https://www.cnblogs.com/gxp69/p/12711412.html

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网