React-router ルーティングの簡単な分析

不言
リリース: 2018-07-13 16:26:43
オリジナル
2002 人が閲覧しました

この記事では、特定の参考値を持つ React-router ルーティングの簡単な分析を主に紹介します。必要な友達はそれを参照してください

私たちが望むのは、単純な React-router ルートです。私が欲しいのはシンプルなreact-routerルートです

vue-routerルーティングの使用には慣れていますが、再度react-routerを使用するのはいつも非常に面倒に感じます。

では、vue-router のような単純なルーティング プラグインで React を使用する方法はありますか?

そこにあるかどうかに関係なく、ホイールはすでに構築されています、受け入れてください。

react-concise-router

react-concise-router は、react-router v4.x パッケージに基づくルーティング プラグインです。

1. インストール

直接インストールします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

    rrreeerrreee

    2. ルートリストオブジェクトを定義する

router.js

rrreee
  • App . jsx

    rrreee

    API

    new Router(options)
  • ルーティング オブジェクトを作成し、ルーターを返します。
  • options
  • ルート設定のオブジェクトオブジェクト
  • options.mode
  • 文字列はルートタイプ、ハッシュを定義します
  • options.routes
  • 配列ルートリスト
  • オプション.ルート[ ].name
  • 文字列ルート名。children 属性が現在存在する場合、ルートのエクスポート名を表します

options.routes[].path

文字列パス

🎜🎜options.routes[].children🎜 配列の子ルートリスト 🎜🎜🎜🎜options.path が存在しないことを意味します。存在するか、* です。ルートは notMath ルートとして扱われ、404🎜🎜router🎜🎜🎜🎜🎜router.route(route)🎜と一致して、history.push の URL を生成します。 🎜🎜🎜🎜🎜router.beforeEach(cxt, next)🎜 ルート切り替えミドルウェア 🎜🎜🎜

router.view

🎜<router.view /> はルートですコンポーネント。 🎜🎜🎜props🎜🎜🎜🎜🎜🎜props.name🎜 文字列ルートエクスポートサブ名、デフォルトは options.routes[].name で設定されます。 🎜🎜🎜

router.link

🎜router.link は、Link に似たコンポーネントです。 🎜🎜🎜props🎜🎜🎜🎜🎜🎜props.to🎜 object|string パスまたはパス オブジェクト ルート。 🎜🎜🎜

router.beforeEach

🎜router.beforeEach はルーティング ミドルウェアで、認可インターセプト、リダイレクト、待機、その他の操作などのルーティング切り替えイベントを実行できます。 🎜🎜関数として定義する必要があります🎜rrreee🎜🎜🎜🎜ctx🎜 これはコンテキストオブジェクト、{ルート、ルーター、履歴、...}です🎜🎜🎜🎜🎜next🎜 これはコールバック関数です、最後に呼び出してくださいnext は、他のルートにリダイレクトできる文字列パスまたはオブジェクトを受け入れることができます。 🎜🎜🎜🎜route🎜🎜🎜🎜🎜route.name🎜 ルート名という文字列は path🎜🎜🎜🎜🎜route.path🎜 文字列パス 🎜🎜🎜🎜🎜route.params🎜 オブジェクト ルートパラメータオブジェクト🎜🎜🎜 🎜 🎜route.query🎜 object query string object🎜🎜🎜🎜🎜route.hash🎜 string link hash🎜🎜🎜🎜 以上がこの記事の全内容であり、その他の関連コンテンツについても役立つことを願っています。 、PHP中国語ネットに注目してください! 🎜🎜関連する推奨事項: 🎜🎜🎜 React コンポーネントと状態|小道具の分析🎜🎜🎜🎜🎜 JS を使用して単純なデジタル時計を実装する方法🎜🎜🎜

以上がReact-router ルーティングの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート