React-Router-集中式管理

2023-10-11 43

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React-Router-集中式管理

前言

React Router 是 React 应用程序中常用的路由管理库，用于处理页面导航和路由控制。集中式管理是一种在大型应用程序中更好地组织和管理路由的方法，它有助于维护应用的可扩展性和可维护性。

路由统一管理(路由集中管理)

现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。

官方文档：https://www.npmjs.com/package/react-router-config

首先需要安装插件：

npm install --save react-router-config

然后在创建一个 router 目录在该目录当中创建一个 index.js 当然你也可以不用像我这样，你也可以在某一处地方创建一个 JS 文件在该文件当中编写对应的路由映射配置文件内容即可，index.js 内容如下：

import Home from '../components/Home'
import About from '../components/About'
import Other from '../components/Other'
import User from '../components/User'
import Login from '../components/Login'
import Discover from '../components/Discover'
const routers = [
    {
        path: '/home',
        exact: true,
        component: Home
    },
    {
        path: '/about/:name/:age',
        exact: true,
        component: About
    },
    {
        path: '/user',
        exact: true,
        component: User
    },
    {
        path: '/login',
        exact: true,
        component: Login
    },
    {
        path: '/discover',
        exact: true,
        component: Discover
    },
    {
        component: Other
    },
];
export default routers;

更改 App.js 的一级路由：

import React from 'react';
import {NavLink, withRouter} from 'react-router-dom';
import {renderRoutes} from 'react-router-config';
import routers from './router/index';
class App extends React.PureComponent {
    render() {
        const obj = {
            name: 'yangbuyiya',
            age: 18,
            gender: 'man'
        };
        return (
            <div>
                <NavLink to={'/home?name=yangbuyiya&age=18'} activeStyle={{color: 'red'}}>Home</NavLink>
                <NavLink to={'/about/yangbuyiya/18'} activeStyle={{color: 'red'}}>About</NavLink>
                <NavLink to={{
                    pathname: '/user',
                    search: '',
                    hash: '',
                    state: obj
                }}
                         activeStyle={{color: 'red'}}
                >
                    User
                </NavLink>
                <NavLink to={'/discover'} activeStyle={{color: 'red'}}>广场</NavLink>
                <button onClick={() => {
                    this.btnClick()
                }}>
                    广场
                </button>
                {renderRoutes(routers)}
            </div>
        )
    }
    btnClick() {
        this.props.history.push('/discover');
    }
}
export default withRouter(App);

如上的更改主要内容为，就是把之前的 Route 去除了，利用了 react-router-config 当中的 renderRoutes 方法将我们编写的 routers 进行注册，然后我们的一级路由与对应的组件的关系就关联起来了。

嵌套路由

在博主对官方文档的阅读时发现，如果我们的路由有二级路由需要在一级路由当中在指定一下二级路由的规则，通过 routes 属性进行指定：

更改 router/index.js:

index.js:

import Home from '../components/Home'
import About from '../components/About'
import Other from '../components/Other'
import User from '../components/User'
import Login from '../components/Login'
import Discover, {Hot, TopList, PlayList} from '../components/Discover'
const routers = [
    {
        path: '/home',
        exact: true,
        component: Home
    },
    {
        path: '/about/:name/:age',
        exact: true,
        component: About
    },
    {
        path: '/user',
        exact: true,
        component: User
    },
    {
        path: '/login',
        exact: true,
        component: Login
    },
    {
        path: '/discover',
        component: Discover,
        routes: [
            {
                path: '/discover',
                exact: true,
                component: Hot,
            },
            {
                path: '/discover/toplist',
                exact: true,
                component: TopList,
            },
            {
                path: '/discover/playlist',
                exact: true,
                component: PlayList,
            },
        ]
    },
    {
        component: Other
    },
];
export default routers;

更改 Discover.js 将其他三个需要使用到的组件导出一下：

export function Hot() {
    return (
        <div>推荐</div>
    )
}
export function TopList() {
    return (
        <div>排行榜</div>
    )
}
export function PlayList() {
    return (
        <div>歌单</div>
    )
}

然后在嵌套路由的组件当中再次通过 renderRoutes 方法进行注册嵌套路由这里有个注意点，我们这里是需要注册的是一级路由当中的嵌套路由里面的 routes 的内容通过博主的计算发现它在 index.js 的索引为 4 然后我们的 Discover.js 的代码如下所示：

import React from 'react';
import {NavLink} from "react-router-dom";
import {renderRoutes} from 'react-router-config';
import routers from '../router/index';
export function Hot() {
    return (
        <div>推荐</div>
    )
}
export function TopList() {
    return (
        <div>排行榜</div>
    )
}
export function PlayList() {
    return (
        <div>歌单</div>
    )
}
class Discover extends React.PureComponent {
    render() {
        return (
            <div>
                <NavLink exact to={'/discover'} activeStyle={{color: 'red'}}>推荐</NavLink>
                <NavLink exact to={'/discover/toplist'} activeStyle={{color: 'red'}}>排行榜</NavLink>
                <NavLink exact to={'/discover/playlist'} activeStyle={{color: 'red'}}>歌单</NavLink>
                <button onClick={() => {
                    this.btnClick()
                }}>歌单
                </button>
                {
                    renderRoutes(routers[4].routes)
                }
            </div>
        )
    }
    btnClick() {
        this.props.history.push('/discover/playlist');
    }
}
export default Discover;

如上的 renderRoutes(routers[4].routes) 的写法是 2B 铅笔写法, 企业开发中千万不要这么写，如果当前组件是通过 renderRoutes 创建的, 那么系统过就会自动给这个组件传递一个 route 对象，然后我们可以根据这个 route 对象获取到嵌套路由的 routes 信息，然后推荐的写法和改造之后的代码如下：

{
    renderRoutes(this.props.route.routes)
}

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

React-Router-集中式管理

前言

路由统一管理(路由集中管理)

嵌套路由

最后

热门文章

最新文章

相关课程

相关电子书