路由配置-react

阅读目录

• 一、简单的配置
• 二、自动化导入多模块路由文件

回到顶部

一、简单的配置

1.安装

npm i react-router-dom;

2.配置APP.js

import React from "react";
import { Router } from './routers/router';

function App() {
  return (
      <Router />
  );
}

export default App;

3.配置router文件夹

3.1 config.js

import Home from 'src/pages/Home';
import About from 'src/pages/About';

// 整体路由列表,根据路由规则,path长的需放在上方,请注意!!!!
/*
  {
    path: '', // 路由
    component: '', // 组件
    exact: false,
    noMenu: true // true没有菜单
  },
*/
export const routeList = [
  {
    path: '/about',
    component: About,
    exact: false,
  },
  {
    path: '/',
    component: Home,
    exact: false
  },
];

3.2 router.js

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { routeList } from './config';

const getRouters = () => {
  return (
    <HashRouter>
      <Switch>
        {
          routeList.map((route) => {
            return (
              <Route key={route.path} path={route.path} render={() => {
                return <route.component/>
              }}/>
            )
          })
        }
      </Switch>
    </HashRouter>
  )
};

const Router = () => {
  const tempRouters = getRouters()
  return tempRouters
}
export {
  Router
};

基础配置完成！

回到顶部

二、自动化导入多模块路由文件

1.配置router文件夹下的config.js

const routerAry = []
// 自动加载modules目录下的 .js 结尾的文件
const requireRouter = require.context("./modules", false, /\.js$/);

requireRouter.keys().forEach(fileName => {
  const routerConfig = requireRouter(fileName);
  routerAry.push(...routerConfig?.routes);
});

export const routeList = [
  {
    path: '/login',
    // component: load('login'),
    meta: {
      requireAuth: false,
      title: '登录'
    }
  },
  ...routerAry
]

2.配置modules路由模块文件

2.1 about.js

import About from 'src/pages/About';

export const routes = [
  {
    path: '/about',
    component: About,
  },
]

2.2 home.js

import Home from 'src/pages/Home';

export const routes = [
  {
    path: '/home',
    component: Home,
  },
]