반응 라우터 라우팅의 간단한 분석

이 글은 주로 React-Router 라우팅에 대한 간단한 분석을 소개하는데, 이는 어느 정도 참조 가치가 있습니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

우리가 원하는 것은 간단한 React-Router 라우팅입니다

us What 내가 원하는 것은 간단한 React-Router 경로입니다

저는 vue-router 라우팅 사용법에 익숙해서, 다시 React-router를 사용하는 것이 항상 꽤 번거롭습니다.

그렇다면 vue-router와 같은 간단한 라우팅 플러그인으로 React를 사용할 수 있는 방법이 있을까요?

있든 없든 이미 바퀴를 만들었으니 받아주세요.

react-concise-router

react-concise-router는 React-router v4.x 패키지를 기반으로 하는 라우팅 플러그인입니다. 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

  1. 설치

  직접 설치
rrreee

또한 설치해야 합니다

rrreeerrreee

2. 경로 목록 개체 정의

• router.jsrrreee

App .jsx

• rrreee

  API

  new Router(options) 라우팅 객체를 생성하고 라우터를 반환합니다.

• options

  객체 경로 구성의 객체

• options.mode

  문자열은 경로 유형, hash|history

• options.routes

  배열 경로 목록

을 정의합니다.

옵션.경로[ ].name

문자열 경로 이름, 하위 속성이 현재 존재하는 경우 경로 내보내기 이름

options.routes[].path

문자열 경로

🎜options.routes[].comComponent🎜 함수를 나타냅니다. 라우팅 구성 요소가 현재 존재하는 경우 하위 경로 구성 요소 🎜🎜🎜🎜🎜options.routes[].children🎜 배열 하위 경로 목록 🎜🎜🎜🎜options.path이 존재하지 않음을 의미합니다. 존재하거나 *입니다. 경로는 404🎜🎜router🎜🎜🎜🎜🎜router.route(route)🎜와 일치하여 History.push에 대한 URL을 생성하는 notMath 경로로 처리됩니다. 🎜🎜🎜🎜🎜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🎜 이것은 컨텍스트 개체인 {route, router,history,...}🎜🎜🎜🎜🎜next🎜 이것은 콜백 함수입니다. 마지막으로 호출하세요 next는 다른 경로로 리디렉션할 수 있는 문자열 경로나 개체를 허용할 수 있습니다. 🎜🎜🎜🎜route🎜🎜🎜🎜🎜route.name🎜 문자열 이름이 지정된 경로 이름, path🎜🎜🎜🎜🎜route.path🎜 문자열 path 🎜🎜🎜🎜🎜route.params🎜 개체 경로 매개 변수 개체보다 우선합니다. 🎜🎜🎜 🎜 🎜route.query🎜 object query string object🎜🎜🎜🎜🎜route.hash🎜 string link hash🎜🎜🎜🎜 위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 넷에 주목해주세요! 🎜🎜관련 권장 사항: 🎜🎜🎜React 구성 요소 및 상태 분석|props🎜🎜🎜🎜🎜JS를 사용하여 간단한 디지털 시계를 구현하는 방법🎜🎜🎜

위 내용은 반응 라우터 라우팅의 간단한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!