React封装路由表

最新推荐文章于 2025-03-14 10:42:27 发布

不管，我要跨世纪

最新推荐文章于 2025-03-14 10:42:27 发布

阅读量1.5k

点赞数

文章标签： react

本文链接：https://blog.youkuaiyun.com/gengtieguang/article/details/108568517

版权

本文详细介绍了如何在React项目中封装路由表，包括在router文件夹下创建相关文件，配置router.view.js和router.config.js，以及在App.js中引入并使用这些配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：在router文件夹下

在这里插入图片描述

第二步：router.view.js 与 router.config.js

router.view.js


import React from 'react'
import {Switch,Redirect,Route} from 'react-router-dom'

export default props =>(
    <Switch>
        {
            props.routers.map((item,key)=>{
                if(item.to) return <Redirect key={key} from={item.from} to={item.to}/>
                return <Route key={key} path={item.path} render={ routes => <item.component {...routes} routers={item.children} /> } />
            })
        }
    </Switch>
)

router.config.js (配置路径及对应组件)

// 一级
import Home from '../views/home/index'
import Search from '../views/search/index'
import Record from '../views/record/index'
import Detail from '../views/detail/index'
import Health from '../views/health/index'
import Login from '../views/login/index'
import Edit from '../views/edit/index'
import Buy from '../views/buy/index'

// 二级
import Homepage from '../views/homepage/index'
import My from '../views/my/index'

import Healthlist from '../views/healthlist/index'
import Searchlist from '../views/searchlist/index'


const routerConfig = [
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'/home/homepage',
                component:Homepage,
            },
            {
                path:'/home/my',
                component:My,
            },
            {
                from:'/home',
                to:'/home/homepage'
            }
        ]
       
    },
    {
        path:'/search',
        component:Search
    },
    {
        path:'/edit',
        component:Edit
    },
    {
        path:'/login',
        component:Login
    },
    {
        path:'/health',
        component:Health
    },
    {
        path:'/buy',
        component:Buy
    },
    {
        path:'/detail',
        component:Detail
    },
    {
        path:'/record',
        component:Record,
        children:[
            {
                path:'/record/healthlist',
                component:Healthlist,
            },
            {
                path:'/record/searchlist',
                component:Searchlist,
            },
            {
                from:'/record',
                to:'/record/healthlist'
            }
        ]
    },
    {
        from:'/',
        to:'/login'
    }
]

export default routerConfig

第三步：App.js中使用

import React from 'react';
import {BrowserRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import store from '../store/index'
import routers from '../router/router.config'
import RouterViews from '../router/router.view'


function App() {
  return (
  <Provider store={store}>
     <BrowserRouter>
      <RouterViews routers={routers}/>
   </BrowserRouter>
  </Provider>
  );
}

export default App;