基于React Hook 的 React Router4 路由统一配置管理（v4.0+ ）

最新推荐文章于 2024-08-06 11:32:29 发布

@baby张

最新推荐文章于 2024-08-06 11:32:29 发布

阅读量3.9k

点赞数 6

分类专栏： React技术栈实用功能

本文链接：https://blog.csdn.net/weixin_43648947/article/details/103580812

版权

这篇博客介绍如何利用React Hooks和`react-router-config`、`react-router-dom`库来实现React Router 4的统一、清晰的路由管理。通过创建特定的目录结构和配置文件，可以实现类似Vue的集中式路由配置，提高路由的可读性和管理性。文中提供了一个详细的示例，并将代码发布到GitHub，读者可以通过查看示例来了解具体实现。

摘要由CSDN通过智能技术生成

这篇博客是，基于react hook的脚手架，配合react-router-config react-router-dom来搭建的路由结构，简介，结构清晰，方便管理。。。

demo已经发布到github上

感觉可以的点一点star，谢谢咯！

github地址：https://github.com/babybrotherzb/React-Router4

写过vue的小伙伴都知道，vue的路由是在new Router 里统一配置的，写起来也特别爽，路由层次很清除，也很方便管理，然而react的路由相比较而言就有局限性，也不方便管理。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
let roles = [
        {
   
            path: '/',
            component: home,
            redirect: '/home/first',
            children: allroutes()
        },
        {
   
            path: '/login',
            component: login
        },
        {
   
            path: '*',
            redirect: '/'
        }
    ]
const router = new Router({
   
    routes: roles
})

import React from 'react'
import {
    Router, Route, Link } from 'react-router'

const App = React.createClass({
   
  render() {
   
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {
   this.props.children}
      </div>
    )
  }
})

const About = React.createClass({
   
  render() {
   
    return <h3>About</h3>
  }
})