当前位置:Gxlcms > JavaScript > react-router路由的简单分析

react-router路由的简单分析

时间:2021-07-01 10:21:17 帮助过:30人阅读

这篇文章主要介绍了关于react-router路由的简单分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

我们要的是一个简单的react-router路由

我们要的是一个简单的react-router路由

习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。

那么react有没有用法跟vue-router一样使用简单的路由插件呢?

管它有没有,轮子我已经造好了,请收下。

react-concise-router

react-concise-router 是一个基于 react-router v4.x 封装的一个路由插件。

1、安装

直接安装

npm install -S react-concise-router

你还需要安装

npm install -S react-router
npm install -S react-router-dom

2、定义路由列表对象

router.js

import Router from 'react-concise-router'
import Home from './views/Home'
import User from './views/User'
import UserInfo from './views/UserInfo'
import ErrorPage from './views/Error'
import view from './views/admin/view'
import Dashboard from './views/admin/Dashboard'

const router = new Router ({
  mode: 'hash',
  routes: [
    {path: '/', component: Home},
    {path: '/user', component: User},
    {path: '/user/:userId', name: 'info', component: UserInfo},
    {
      path: '/admin',
      component: view,
      name: 'admin-view',

      children: [
        {path: '/', component: Dashboard},
        {path: '/test', component: Dashboard},
        {component: ErrorPage}
      ]
    },
    {path: '*', component: ErrorPage},
  ]
})

export default router

App.jsx

import React from 'react'
import router from './router'

export default class App extends React.Component {
  render () {
    return (
      <p>
        <p>wellcome !</p>
        <router.view />
      </p>
    )
  }
}

API

new Router(options) 创建路由对象,返回router。

  • options object 路由配置的对象

  • options.mode string 定义路由类型,hash|history

  • options.routes array 路由列表

  • options.routes[].name string 路由名称,如果当前存在children属性,表示路由出口名称

  • options.routes[].path string 路径

  • options.routes[].component Function 路由组件;如果当前存在children属性,表示子路由组件

  • options.routes[].children array 子路由列表

options.path 不存在或者为 * 路由会当做notMath路由,匹配404

router

  • router.route(route) 生成url,用于history.push。

  • router.beforeEach(cxt, next) 路由切换中间件

router.view

<router.view /> 是一个路由出口组件。

props

  • props.name string 路由出口子名称,默认'default';在 options.routes[].name 设置。

router.link

router.link 是一个类似于 Link 的组件。

props

  • props.to object|string 路径或者路径对象route。

router.beforeEach

router.beforeEach 是一个路由中间件,你可以做一些路由切换事件;比如授权拦截,重定向,等待等操作。

你应该把它定义为一个函数

router.beforeEach = function (ctx, next) {}
  • ctx 这个是一个上下文对象,{route, router, history,...}

  • next 这是一个回调函数,请在最后调用它;next 可以接受一个字符串路径或者对象,这样可以重定向到别的路由。

route

  • route.name string 命名路由name,优先于path

  • route.path string 路径

  • route.params object 路由参数对象

  • route.query object 查询字符串对象

  • route.hash string 链接hash

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

对于 React 组件和state|props的解析

以上就是react-router路由的简单分析的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行