我們要的是一個簡單的react-router路由

藍月蕭楓發表於2018-07-11
React路由

我們要的是一個簡單的react-router路由

習慣了 vue-router 路由的用法，再用react-router總感覺挺麻煩的。

那麼react有沒有用法跟vue-router一樣使用簡單的路由外掛呢？

管它有沒有，輪子我已經造好了，請收下react-concise-router。

react-concise-router

react-concise-router 是一個基於 react-router v4.x 封裝的一個路由外掛。

有了這個外掛，你可以不用再去學 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 (
      <div>
        <p>wellcome !</p>
        <router.view />
      </div>
    )
  }
}

複製程式碼

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

最後

安利一個詳細的列子：ant-admin-platform

原始碼：react-concise-router

再說下：外掛開發出來不久，可能存在一些問題，如果有問題，請提issues，感謝你的使用。 剛從事react開發不久，有什麼不合理的可以在下方評論交流下。

相關文章