欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react嵌套路由

程序员文章站 2022-06-22 07:55:45
1、结构目录 2、路由配置文件,参照的vue-router config.js import Login from '../view/Login.js'; import System from '../view/System.js'; import Bus from '../view/Bus.js' ......

1、结构目录

react嵌套路由

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);

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

react嵌套路由

 

react嵌套路由

 

 

react嵌套路由

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