react-router-config 插件使用和分析

最新推荐文章于 2025-06-10 11:54:29 发布

今天又懒得加班

最新推荐文章于 2025-06-10 11:54:29 发布

阅读量6.6k

点赞数 3

分类专栏： react

react 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了React Router与Vue Router的区别，指出虽然React Router在设计上可能不如Vue Router直观，但通过使用react-router-config插件，可以实现类似Vue Router的易用性。文章详细介绍了如何在React项目中配置并使用react-router-config。

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

学习react全家桶的时候肯定会使用react-router4.0

react-router和vue-router对比起来，感觉vue-router设计的真的是简单好用啊。

但是react可以通过一款react-router-config插件做到和vue-router一样的使用感

npm 仓库：https://www.npmjs.com/package/react-router-config

react-router-config的源码

import React from "react";
import Switch from "react-router/Switch";
import Route from "react-router/Route";
const renderRoutes = (routes, extraProps = {}, switchProps = {}) =>
routes ? (
    <Switch {...switchProps}>
        {routes.map((route, i) => ( 
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props => (
            <route.component {...props} {...extraProps} route={route} />
          )}
        />
      ))}
    </Switch>
  ) : null;
 export default renderRoutes;

route.js

const routes = [
    { path: '/',
        exact: true,
        component: Home,
    },
    {
        path: '/login',
        component: Login,
    },
    {
        path: '/user',
        component: User,
    },
    {
        path: '*',
        component: NotFound
    }
]

app.js 生成静态路由

import { renderRoutes } from 'react-router-config'
import routes from './router.js'
const App = () => (
   <main>
      <Switch>
         {renderRoutes(routes)}
      </Switch>
   </main>
)

export default App

简单用法就是这样

扩展文章：

1.react-router配置鉴权：https://segmentfault.com/a/1190000015282620