這篇文章主要介紹了關於react-router路由的簡單分析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
我們要的是一個簡單的react-router路由
習慣了vue-router 路由的用法，再用react-router總覺得挺麻煩的。
那麼react有沒有用法跟vue-router一樣使用簡單的路由外掛呢？
管它有沒有，輪子我已經造好了，請收下。
react-concise-router 是基於 react-router v4.x 封裝的一個路由外掛程式。
直接安裝
npm install -S react-concise-router
你還需要安裝
npm install -S react-router
npm install -S react-router-dom
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 routerApp.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>
)
}
}##new Router(options) 建立路由對象，回傳router。
options object 路由設定的物件
string 定義路由類型， hash|history
array 路由清單
string 路由名稱，如果目前有children屬性，表示路由出口名稱
string 路徑
Function 路由元件；如果目前存在children屬性，表示子路由元件
array 子路由清單
不存在或為*路由會當做notMath路由，匹配404router
產生url，用於history.push。
路由切換中間件
是一個路由出口元件。
string 路由出口子名稱，預設'default'；在options .routes[].name 設定。
# 是一個類似 Link 的元件。
object|string 路徑或路徑物件route。
是路由中間件，你可以做一些路由切換事件；例如授權攔截，重定向，等待等操作。 你應該把它定義為一個函數
router.beforeEach = function (ctx, next) {}這個是一個上下文對象，{route, router, history,... }
這是一個回呼函數，請在最後呼叫它；next 可以接受一個字串路徑或對象，這樣可以重定向到別的路由。
string 命名路由name，優先於path
string 路徑
object 路由參數物件
object 查詢字串物件
string 連結hash
相關推薦：
對於React 元件和state|props的解析如何使用JS實作一個簡易數位時鐘以上是react-router路由的簡單分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
