react-router-dom 与后台路由的混合搭配使用

最新推荐文章于 2024-07-24 18:46:58 发布

金刚腿

最新推荐文章于 2024-07-24 18:46:58 发布

阅读量502

点赞数

分类专栏： react es6

本文链接：https://blog.csdn.net/goldenlegs/article/details/101268556

版权

es6 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

react

10 篇文章 0 订阅

订阅专栏

目前web开发流行的前后台分离模式,但是实际开发中存在需要后台来控制部分路由的情况

思路

单独配置一个后台路由的对象数组待用
代码先匹配前台路由
不匹配的则去匹配上面配置的对象数组, 跳转所需要的路径

具体代码

后台路由配置: redirect.js

import React from "react";
import { Redirect } from "react-router-dom";
import { routerlist } from "@/router.js";
const redirectlist = [
  {
    from: "/pages/A",   //from为后台路由
    to: "/home/A",         //to为需要跳转的路由
    out: false        //用于区分 to跳转是否跳出react应用, 或是非react页面路由
  },
  {
    from: "/pages/B", 
    to: "/pages/B",
    out: true
  },
  {
    from: "/pages/C", 
    to: "/home/C",
    out: false
  },
]
export function routerRedirect(props) {
  var willrdpath = redirectlist.find(i => i.from == props.location.pathname);  //redirectlist 数组中找出当前的跳转路由
  if (willrdpath ) { 
    if(!willrdpath.out) {  //之后不跳出react应用,则去匹配前台路由并跳转
    	var rdpath = routerlist.find(i => i.path == willrdpath.to);  
    	return <Redirect to={rdpath.path + props.location.search} />;   //带上参数
    } else { // 跳出react应用, 则跳转所需页面
        window.location.href =  willrdpath.to +  props.location.search   //带上参数
    }
  } else {
    return <div>404 </div>;
  }
}

前台路由配置: router.js

export const routerlist = [
    {
        path: '/home/A',
        component: () => import('./pages/home/A.jsx')
    }, {
        path: '/home/B',
        component: () => import('./pages/home/B.jsx')
    },{
        path: '/home/C',
        component: () => import('./pages/home/C.jsx')
    },
]

react入口文件: app.js

import React from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import { Provider } from "react-redux";

import store from "./store";
import {routerlist} from "./router";
import {routerRedirect} from "./redirect.js"

class App extends React.PureComponent {
  render() {
    return (
      <Provider store={store}>
        <HashRouter>
          <Switch>
            {routerlist.map((i, key) => (        //先匹配前台路由
              <Route
                path={i.path}
                component={i.component}
                exact
                key={key}
              />
            ))}
            <Route render={props=>routerRedirect(props)} />  //后匹配其他路由
          </Switch>
        </HashRouter>
      </Provider>
    );
  }
}

export default App;