react封装路由表

封装路由表

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

class RouterView extends Component {
    render() {
        let {routes} = this.props;	//取到传进来的路由表
        let rdArr = routes.filter(item=> item.redirect);	//把所以路由重定向取出来
        let rdCom = rdArr.map((item,key)=><Redirect from={item.path} to={item.redirect} key={key} />);
        return (
            <Switch>
                {
                    routes.map((item,key)=> !item.redirect && <Route path={item.path} key={key} render={(props)=><item.component {...props} routes={item.children} />} />).concat(rdCom)
                }
            </Switch>
        );
    }
}
export default RouterView;

调用

import RouterView from './router/RouterView';	//封装的组件
import routes from './router/routerConfig';	//路由表

// 把路由表引进来传进去
<RouterView routes={routes.routes} />

路由表格式

routes: [
        {
            path: '/home',
            component: Home
        },
        {
            path: '/index',
            component: Index,
            children: [
                {
                    path: '/index/hot',
                    component: Hot
                },
                {
                    path: '/index/cold',
                    component: Cold
                },
                {
                    path: '/index',
                    redirect: '/index/hot'
                }
            ]
        },
        {
            path: '/',
            redirect: '/index'
        }
    ]
### 配置 `react-router-dom` 实现路由功能 为了配置并使用 `react-router-dom` 来管理应用中的导航,可以遵循官方文档提供的快速入门指南[^1]。具体来说,在项目中集成此库涉及几个重要步骤。 #### 创建基本的路由设置 首先,确保安装了最新版本的 `react-router-dom` 库。接着可以在入口文件(如 `main.tsx` 或者 `index.js` 文件)里引入必要的组件来包裹整个应用程序: ```typescript import ReactDOM from 'react-dom/client'; import { HashRouter } from "react-router-dom"; import './main.css'; import BaseRouter from './router'; const container = document.getElementById('root'); if (container) { const root = ReactDOM.createRoot(container); root.render( <HashRouter> <BaseRouter /> </HashRouter> ); } ``` 这段代码展示了如何通过 `<HashRouter>` 组件将所有的页面内容封装起来,从而支持基于 URL hash 的前端路由机制[^4]。 #### 使用 `createBrowserRouter` 构建路由器对象 对于更复杂的场景,推荐采用函数式的方式定义路由表,并利用 `createBrowserRouter` 方法创建一个浏览器兼容的路由器实例。这通常会在单独的模块内完成,比如命名为 `./router/index.ts`: ```javascript // ./router/index.ts import { createBrowserRouter, RouteObject } from 'react-router-dom'; import Home from '../pages/Home'; import About from '../pages/About'; import Users from '../pages/Users'; export default createBrowserRouter([ { path: '/', element: <Home />, }, { path: '/about', element: <About />, }, { path: '/users', element: <Users />, } ]); ``` 之后再将其传递给顶层的应用程序容器内的 `RouterProvider` 组件以供渲染[^5]: ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { RouterProvider } from 'react-router-dom'; import router from './router/index'; const rootElement = document.getElementById('root'); if (rootElement !== null) { const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); reportWebVitals(); } ``` 上述方法不仅简化了路由逻辑的编写方式,还提高了可维护性和扩展性。 #### 探索更多高级特性 除了简单的路径匹配外,`react-router-dom` 还提供了诸如参数化URL、嵌套子路由以及条件访问控制等功能[^2]。这些都可以帮助开发者构建更加灵活多变且用户体验友好的单页应用(SPA)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值