여러 반응 라우터 구성

라우팅의 개념
액션 URL과 라우팅 기능은 단일 페이지 응용 프로그램에 매핑 할 경로의 필수적인 부분이다, 라우팅 구성, 즉 수행 URL 라우터와 일치하는 방법에 대한 지시 사항의 세트 및 대응하는 매핑 기능이며, 해당 번호.

반응 라우터
모든 문 JS 프레임 워크, 여왕 반응 응용 프로그램을 개발하는 반응 라우터 라우팅 프레임 워크를 자신의 사용자 정의 라우터 프레임을해야합니다, 지금은 최신 공식 버전의 4.1.2입니다. 이 문서는 다른 프레임 워크보다 유연한 라우터 구성에 비해 반응 라우터를 소개하는 것입니다, 당신은 자신의 프로젝트에 따라 적절한 방법을 선택할 수 있습니다.

1. 라벨 방법
여기에 우리가 예를 살펴 :

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
  render() {
    return <div>Welcome to the app!</div>
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      {/* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

우리는 다음 구성 요소를 기반으로 해당지도를 발견, 국도 탭을 사용하여이 라우팅 구성을 볼 수 있습니다.

이 IndexRoute가 다른 레이블 비트 주목해야한다,이 역할은 '/'과 일치하는 것입니다
전체 어셈블리의 응용 프로그램을 렌더링 할 때, 그것은 아이들을 렌더링되지 않을 수 있기 때문에, 경로를 이미 거기에 '/'페이지 있었고, 당신은 집으로 IndexRoute 수 있습니다.
캐나다에서 레이블에 직접 루트 태그에 라우팅을 중첩, 간단한 것입니다

2. 개체 구성은
이 같은 사용자가 떠날 알림 여부, 페이지 저장되지 않은 정보를 편집 한 경우로, 경로를 이동하기 전에 때때로 우리는 무언가를 할 필요가있다. 반응 라우터는 두 개의 후크를 제공하며, 모든 경로가 트리거 최 상위 행 최하단의 서브 경로를 떠나 onLeave, 최하부로부터 상위 행에 최에서부터 onEnter 트리거 입력 경로 라우팅.

코드를 살펴 보자 :

const routeConfig = [
  { path: '/',
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              //do something
            }
          }
        ]
      }
    ]
  }
]

React.render(<Router routes={routeConfig} />, document.body)

3. 수요 라우팅 구성에로드 (이해에 초점을 로딩 성능을 최적화 할 수 있습니다)
필요한 부하 JS 성능을 최적화하는 방법으로 대규모 애플리케이션을 성능은 매우 중요한 문제입니다. 구성 요소가 비동기 적으로로드 할 수 있습니다에서뿐만 아니라, 라우팅 비동기 로딩을 허용 라우터 반응한다. 경로는 getChildRoutes이 getIndexRoute 및 getComponents 이러한 기능, 그들은 비동기 적으로 수행 정의 할 수 있으며 필요할 때만 호출됩니다.

우리는 예를 살펴 :

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

이 방법은 복잡한 도구를 사용하는 웹팩 분할 기능 구현 코드, 작은 블록으로 사실, 경로 분할 한 다음 필요에 따라로드를 가지고 있어야합니다.

여러 반응 라우터 구성

추천