react-router拦截与配置

最新推荐文章于 2025-03-25 14:44:31 发布

原创最新推荐文章于 2025-03-25 14:44:31 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-router #react

react 同时被 2 个专栏收录

1 篇文章

订阅专栏

react-router

1 篇文章

订阅专栏

本文介绍如何在React应用中使用react-router-dom实现动态路由配置，并结合组件生命周期进行权限验证，确保未授权用户无法访问特定页面。

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

import React, { Component } from 'react';
import { Route, Switch, Redirect  } from 'react-router-dom';
import Test1 from '../view/Test1';
import Test3 from '../view/Test3';
const routes = [
    {
        path: "/",
        exact: true,
        name: "test1",
        component: Test1,
        meta: {
            auth: 0
        }
    },
    {
        path: "/test3",
        exact: true,
        name: "test3",
        component: Test3,
        meta: {
            auth: 0
        }
    }
]
class IndexRouters extends Component {
    componentWillMount() {}
    render() {
        return (
            <Switch>
                {
                    routes.map((item, index) => {
                        return (
                            <Route
                                key={index}
                                path={item.path}
                                exact={item.exact}
                                render={
                                    props => {
                                        if (item.meta.auth === 0) {
                                            return <item.component {...props} route={item} />
                                        } else {
                                            return <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
                                        }
                                    }
                                }
                            >
                            </Route>
                        )
                    })
                }
            </Switch>
        )
    }
}

export default IndexRouters

一般通过配置动态路由以及加上路由组件的声明周期加以校验。