React Router拦截器(钩子)、静态路由、route-view 实现

时间: 2020-03-04阅读: 202标签: 路由

前提

react Router 再 v3 版本之前 是有 onEnter 钩子函数的,也支持静态路由配置;,但到了 v4 版本后钩子函数被移除,官方说是为了将此提供给开发者,由开发者自由发挥。既然如此我们就只能自己实现,目前网上有很多版本,大多都是差不多的,这里做一个总结并深化一下。同时提供钩子函数或者vue中叫路由守卫和静态化路由配置。


钩子函数实现

钩子函数实现比较简单,只需要包装一下官方的路由即可实现,这里我们允许钩子支持 Promise 异步,就需要一个异步组件;代码如下

异步组件代码

class AsyncBeforeEnter extends react.PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            // 注意:此处component和render不会同时使用,同Route中component和render,render方法优先级要高
            // 目标组件 同 <Route componet>
            Component: null,
            // 目标组件render 方法  同 <Route render>
            render: null,
            // 错误信息
            error: null,
            // 标记异步是否完成
            completed: false
        }
    }
    componentDidMount() {
        const { beforeEnter, ...props } = this.props
        // beforeEnter 钩子函数
        const enter = beforeEnter({ ...props })
        if (isPromise(enter)) {
            // 判断是否是Promise
            enter
                .then(next => {
                    this.handleAfterEnter(next)
                })
                .catch(error => {
                    console.error(error)
                    this.setState({ error })
                })
        } else {
            this.handleAfterEnter(enter)
        }
    }
    handleAfterEnter(next) {
        // 结果处理
        const { route = {}, ...props } = this.props
        // 如果结果是null 或者undefined 或者 true : 不做任何处理直接渲染组件
        if (next === null || next === undefined || next === true) {
            this.completed(route.component, route.render)
            return
        }
        // 返回false:阻止组件的渲染
        if (next === false) {
            this.completed(null)
            return
        }

        // 返回 string : 跳转的路由,类似http中302状态码
        // 这里使用 react Router 的 Redirect 做跳转
        if (typeof next === 'string') {
            this.completed(null, () => <Redirect to={next} from={props.location.pathname} />)
            return
        }
        // 返回react 组件
        if (typeof next === 'function' || react.isValidElement(next)) {
            this.completed(null, () => next)
            return
        }

        // 返回 Object: 如果有 redirect=true 的属性,做跳转
        // 否则使用 Route 组件渲染
        if (isPlainObject(next)) {
            const { redirect, ...nextProps } = next
            if (redirect === true) {
                this.completed(null, () => <Redirect {...nextProps} {...{ from: props.location.pathname }} />)
                return
            }
            this.completed(() => <Route {...nextProps} />)
            return
        }
        warn(`"${props.location.pathname} => beforeEnter"
hook return values error. expected null? undefined? true? react.Component? htmlElement? Route props?
route props detail to see
https://reacttraining.com/react-router/web/api/Route
https://reacttraining.com/react-router/web/api/Redirect`
        )
        // 例外情况 阻止组件的渲染
        this.completed(null)
    }
    /**
     * 完成后改变state渲染组件:
     * @param component 
     * @param render 
     */
    completed(component, render) {
        this.setState({ Component: component, render, completed: true, error: null })
    }

    getExtraProps() {
        // 去掉钩子函数,获取其他props
        const { loading: Loading, beforeEnter, ...props } = this.props
        return { ...props }
    }
    render() {
        const { Component, render, error, completed } = this.state
        if (!completed) {
            // 未完成
            return null
        }
        // 已完成
        if (render && typeof render === 'function') {
            return render(this.getExtraProps())
        }
        return Component ? <Component {...this.getExtraProps()} /> : null
    }
}

带有钩子函数的 Route

将其命名为 PrivateRoute
export default (route) => (
    <Route
        path={route.path}
        exact={route.exact}
        strict={route.strict}
        location={route.location}
        sensitive={route.sensitive}
        children={route.children}
        render={props => {
            // beforeEnter
            const { beforeEnter, ...nextProps } = route
            // 如果有钩子函数,执行带有异步组件
            if (route.beforeEnter && typeof route.beforeEnter === 'function') {
                return (
                    <AsyncBeforeEnter
                        beforeEnter={beforeEnter}
                        route={nextProps}
                        {...props}
                        {...extraProps}
                    />
                )

            }
            // 直接渲染
            return (
                route.render && typeof route.render ?
                    (
                        route.render({ ...props, ...extraProps, route: nextProps })
                    ) : (
                        route.component ? (
                            <route.component
                                route={nextProps}
                                {...props}
                                {...extraProps}
                            />
                        ) : null
                    )
            )
        }}
    />
)

使用的时候就可以用该 Route 代替官方的
示例:

<PrivateRoute path="/" component={Example} beforeEnter={(props) => check(props) }/>
<PrivateRoute path="/user" component={User} beforeEnter={(props) => check(props) }/>


静态化路由配置,并支持钩子函数

静态化路由配置官方页给出了方案,见:react-router-config,本文的静态路由配置也是参考了该实现,并重写了其中的实现,加入钩子函数

静态路由配置

基本的静态路由表如下

// 顶级两个路由
// 一个登录
// 其他需要授权后放回
export default [
    {
        path: '/example',
        key: 'example',
        component: Example,
        beforeEnter(props) {
            if (auth(props.localtion.pathname)) {
                return true
            }
            return '/login'
        },
        // 子路由
        routes: [
            {
                path: '/example1',
                key: 'example1',
                component: Example1,
            }
        ]
    },
    {
        path: '/login',
        key: 'login',
        component: Login
    }
]

改写钩子函数使其能渲染静态路由表=>renderRoutes


// renderRoutes
export default (routes, switchProps = {}, extraProps = {}) => {
    return routes && routes.length > 0 ? (
        <Switch {...switchProps}>
            {
                routes.map((route, i) => (
                    <Route
                        key={route.key || i}
                        path={route.path}
                        exact={route.exact}
                        strict={route.strict}
                        location={route.location}
                        sensitive={route.sensitive}
                        children={route.children}
                        render={props => {
                            // beforeEnter
                            const { beforeEnter, ...nextProps } = route
                            if (route.beforeEnter && typeof route.beforeEnter === 'function') {
                                return (
                                    <AsyncBeforeEnter
                                        beforeEnter={beforeEnter}
                                        route={nextProps}
                                        {...props}
                                        {...extraProps}
                                    />
                                )

                            }
                            return (
                                route.render && typeof route.render ?
                                    (
                                        route.render({ ...props, ...extraProps, route: nextProps })
                                    ) : (
                                        route.component ? (
                                            <route.component
                                                route={nextProps}
                                                {...props}
                                                {...extraProps}
                                            />
                                        ) : null
                                    )
                            )
                        }}
                    />
                ))
            }
        </Switch>
    ) : null
}

使用就可以调用 renderRoutes 方法 , 该实例摘自官方示例:

const Root = ({ route }) => (
  <div>
    <h1>Root</h1>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes)}
  </div>
);

const Home = ({ route }) => (
  <div>
    <h2>Home</h2>
  </div>
);

const Child = ({ route }) => (
  <div>
    <h2>Child</h2>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes, { someProp: "these extra props are optional" })}
  </div>
);

const GrandChild = ({ someProp }) => (
  <div>
    <h3>Grand Child</h3>
    <div>{someProp}</div>
  </div>
);

ReactDOM.render(
  <BrowserRouter>
    {/* kick it all off with the root route */}
    {renderRoutes(routes)}
  </BrowserRouter>,
  document.getElementById("root")
);


实现类似 vue-router 里面的 route-view 功能

经过以上的处理,基本的钩子函数和静态路由就算配置完成了;功能虽然完成了,但总感觉使用上有点麻烦;确实,有没有类似 vue-router 中的 route-view 这种的一步到位的呢?好的,安排。。。
这里需要用到 React context 在 v16 以前这是不推荐的,不过现在已经成熟了,可以大胆的用了;如果不知道怎么用和什么原理可以 去这里 补一下知识

这里还有一个很关键的地方,看图划重点:

可以重复使用,内部的值会覆盖外层的值,这样我们就可以多层路由嵌套了;

创建 context

import React from 'react'

const RouteContext = React.createContext([])
// devtool 中使用
RouteContext.displayName = 'RouteViewContext'

export const RouteProvider = RouteContext.Provider
export const RouteConsumer = RouteContext.Consumer

创建 RouteView

import { RouteConsumer } from './context'
import renderRoutes from './renderRoutes'

//RouteView
export default () => {
    return (
        <RouteConsumer>
            {/* 使用静态路由渲染 */}
            {/* ruotes 由RouteProvider 提供 */}
            {routes => renderRoutes(routes)}
        </RouteConsumer>
    )
}

再次改写 renderRoutes, 使其能够渲染下级路由

import { RouteProvider } from './context'

// renderRoutes
export default (routes, switchProps = {}, extraProps = {}) => {
    return routes && routes.length > 0 ? (
        <Switch {...switchProps}>
            {
                routes.map((route, i) => (
                    <Route
                        key={route.key || i}
                        path={route.path}
                        exact={route.exact}
                        strict={route.strict}
                        location={route.location}
                        sensitive={route.sensitive}
                        children={route.children}
                        render={props => {
                            checkProps(props)
                            // beforeEnter
                            const { beforeEnter, ...nextProps } = route

                            // RouteProvider 提供下级路由所需的数据
                            if (route.beforeEnter && typeof route.beforeEnter === 'function') {
                                return (
                                    <RouteProvider value={route.routes}>
                                        <AsyncBeforeEnter
                                            beforeEnter={beforeEnter}
                                            route={nextProps}
                                            {...props}
                                            {...extraProps}
                                        />
                                    </RouteProvider>
                                )

                            }
                            return (
                                <RouteProvider value={route.routes}>
                                    {
                                        route.render && typeof route.render ?
                                            (
                                                route.render({ ...props, ...extraProps, route: nextProps })
                                            ) : (
                                                route.component ? (
                                                    <route.component
                                                        route={nextProps}
                                                        {...props}
                                                        {...extraProps}
                                                    />
                                                ) : null
                                            )
                                    }
                                </RouteProvider>
                            )
                        }}
                    />
                ))
            }
        </Switch>
    ) : null
}

使用

在入口js添加代码如下

import { RouteProvider, RouteView } from '../router'

// 静态路由
const routes = [
    // 略。。。
]
class App extends React.PureComponent {
    // 略。。。
    render() {

        return (
            // 略。。。
            // 提供顶层路由即可
            // 下级路由 renderRoutes 处理
            <RouteProvider value={routes}>
                <RouteView />
            </RouteProvider>
            // 略。。。
        )
    }
}
export default App

二级路由使用

class Example extends React.PureComponent {
    // 略。。。
    render() {
        // 此处便不需要再提供routes了
        // 在 renderRoutes 已经由 RouteProvider 提供了
        return (
            <div>
                Example
                <RouteView />
            </div>
        )
    }
}
export default Example

通过以上努力,我们就具备了静态路由、钩子函数、类似 vue-router 中 router-view;
最终的努力的结果:

方便鉴权
路由方便管理
多层级路由一个组件即可实现渲染

原文出处:React Router v4 & v5 拦截器(钩子)、静态路由、route-view 实现


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8493

前端路由跳转基本原理

目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式,在路由切换时替换 DOM Tree 中最小修改的部分 DOM,来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案,@angular/router、react-router、vue-router

vue 路由模式hash和history的区别

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回index.html文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

实现一个前端路由,如何实现浏览器的前进与后退?

如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ?首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录:没有提供监听前进后退的事件。

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

Flutter页面切换(命名路由)

使用基本路由相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由,会导致大量的重复代码,此时使用命名路由会非常方便

Flutter开发之导航与路由管理

所谓路由管理,就是管理页面之间如何跳转,也被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都是通过维护一个路由栈来实现的,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作

Vue 动态添加路由及生成菜单

写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单。为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的。

nginx 适配react-router browserRoute 路由问题

本文环境比较复杂,首先两层nginx转发,并且访问路径也不是根路径。加上对nginx一知半解,各路搜索一看,全程懵逼。最终没有一个能用的。最后还是靠同事帮助,文档大法结束加班。本文知识点:location优先级

Vue路由实现页面跳转的两种方式(router-link和JS)

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用:通过 <router-link> 实现;<router-link> 组件用于设置一个导航链接,切换不同 HTML 内容

小程序多种路由跳转的区别

从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广