프론트 엔드 라우팅을 위해 반응 라우터를 사용하는 방법에 대한 자세한 설명

이 글은 주로 프론트엔드 라우팅과 React-Router 사용 자세에 대한 자세한 설명을 소개하고, React-Router 사용법에 대해 자세히 소개합니다. 관심 있는 분들은 배워보세요

routing

그런 분들을 위한 글입니다. SPA 개발 경험이 있는 분 라우팅이라는 용어는 누구에게나 낯설지 않습니다. 프론트엔드 라우팅과 백엔드 라우팅의 구현 기술은 다르지만 원리는 동일합니다. HTML5의 히스토리 API가 등장하기 전에는 프런트 엔드 라우팅이 해시를 통해 구현되었으며 해시는 하위 버전의 브라우저와 호환되었습니다. URI 규칙에 #이 있어야 합니다. 웹 서비스는 해시를 구문 분석하지 않으므로 # 이후의 내용은 웹 서비스에서 자동으로 무시됩니다. 그러나 JavaScript는 경로를 읽고 구문 분석한 후 응답할 수 있습니다. 다른 경로의 논리를 처리합니다.

AngularJs UI-Router에 대한 간략한 소개

AngularJS 개발 경험이 있다면 #이 낯설지 않습니다. Angularjs에는 공식적으로 구현된 라우팅 시스템이 있고, 상대적으로 대표적인 타사 중첩 라우팅 메커니즘 UI도 있습니다. -Router; 다음 코드 블록에 표시된 대로:

.state("main.list",angularAMD.route({
    url : '/list/:params',//url &参数
    views : {
      "header@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/Header.html',
        controller:'HeadController',
        controllerUrl:[ ****.js
                  ]
      }),
      "menu@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MenuModule.html',
        controller : "MenuController",
        controllerUrl:[ ****.js]
      }),
      "mainContent@main":angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MainContent.html'
      })
    }
  }))

state() 함수의 첫 번째 매개변수는 경로입니다. "main.list"는 페이지가 "main.list"로 이동할 때 중첩된 라우팅 메커니즘입니다. list" 경로 다운로드 시 상태("main", *) 아래의 모듈 및 리소스(html, js 등)가 먼저 로드되고, 그 다음 상태("main") 아래의 모듈 및 리소스(html, js 등)가 로드됩니다. main.list")가 라우팅을 구현하기 위해 로드됩니다. 중첩;

react-router

-먼저 코드 조각

<Router history={ hashHistory }>
  <Route path=&#39;/&#39; component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>
  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>
  <Route path=“/CHART_ROUTE” component={ChartView}/>
  </Route>
</Router>

React-router는 다음과 유사한 jsx 구문으로 라우터 중첩을 구현합니다. DOM 구조; AngularJs의 UI-Router와 유사해 보이지만 사실 아이디어는 유사합니다.

Angular의 구현 논리:

Jump=》state=》module=》정적 리소스(js) , css, html)=》show(페이지 표시)

react- 라우터 구현 로직:

Jump=》path=》comComponent=》정적 리소스(js, css, html)=》show(페이지 표시) )
이 기사에서는 주로 React-Router 사용에 대해 간략하게 소개합니다.

<Router history={hashHistory}>
 <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Route>
</Router>

위 코드에서 사용자가 /repos에 접근하면 App 컴포넌트가 먼저 로딩되고, 그 안에 Repos 컴포넌트가 로딩됩니다.

<App>
 <Repos/>
</App>

하위 경로는 Router 구성 요소에 작성할 수 없으며 Router 구성 요소의 경로 속성을 별도로 전달할 수 있습니다.

let routes = <Route path="/" component={App}>
 <Route path="/repos" component={Repos}/>
 <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>

path 속성

path 속성은 Route 구성 요소는 경로의 일치 규칙을 지정합니다. 아래 예를 참조하세요

<Route path="inbox" component={Inbox}>
  <Route path="messages/:id" component={Message} />
</Route>

위 코드에서 사용자가 /inbox/messages/:id에 액세스하면 다음 구성 요소가 로드됩니다.

<Inbox>
 <Message/>
</Inbox>

IndexRoute 구성 요소

는 index.html과 유사하며 해당 구성 요소는 기본적으로 로드되며 다음 코드는 기본적으로 홈 구성 요소를 로드합니다

<Router>
 <Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="accounts" component={Accounts}/>
  <Route path="statements" component={Statements}/>
 </Route>
</Router>

이제 사용자가 액세스할 때 /, 로드된 컴포넌트 구조는 다음과 같습니다.

<App>
 <Home/>
</App>

Redirect 구성 요소

Redirect 구성 요소는 경로 점프에 사용됩니다. 즉, 사용자가 한 경로에 액세스하면 자동으로 다른 경로로 점프합니다.

<Route path="inbox" component={Inbox}>
 {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
 ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

이제 /inbox/messages/5에 액세스하면 자동으로 /messages/5로 이동합니다.

Link

Link 구성 요소는 a 태그를 대체하고 링크를 생성하는 데 사용되므로 사용자가 클릭한 후 다른 경로로 이동할 수 있습니다. 기본적으로 라우터 상태를 수신하는 태그의 React 버전입니다.

Form 처리

Link 구성 요소는 일반 사용자의 클릭 점프에 사용되지만 때로는 폼 점프, 버튼 클릭 점프와 같은 작업도 필요합니다. 이러한 상황을 React Router와 어떻게 연결하나요?

첫 번째 방법은 백엔드 언어에서 일반적으로 사용되는 표현식 작성 방법인 browserHistory.push

 handleSubmit(event) {
  event.preventDefault()
  const userName = event.target.elements[0].value
  const repo = event.target.elements[1].value
  const path = `/repos/${userName}/${repo}`
  browserHistory.push(path)
 }

${userName}을 사용하여 문자열의 변수를 가져올 수 있습니다

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },

두 번째 방법은 컨텍스트 개체를 사용하는 것입니다.

export default React.createClass({

 // ask for `router` from context
 contextTypes: {
  router: React.PropTypes.object
 },

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },
})

라우터 파일 관리의 다중 사용자 공동 개발

일반적으로 프로젝트에는 라우터 풀과 동일한 통합 라우터 파일이 있습니다. 이는 라우터 풀에서 일치하는 경로를 요청합니다. 풀. 요청한 페이지를 로드합니다. 하지만. . . 구성 요소를 개발하는 모든 개발자는 라우팅을 구성해야 합니다. 이로 인해 라우터 파일을 관리하기가 어려워지고 쉽게 충돌이나 오류가 발생할 수 있습니다. 그래서. . 어쩌면 각 구성 요소 폴더에 XXX.router 파일을 갖고 프런트 엔드 코드가 패키징되어 온라인으로 업로드될 때 후크 기능을 트리거하고 XXX.router 파일을 중앙 라우터 파일에 병합하여 다중 오류를 방지하는 것이 가능할 수 있습니다. 개인 작업 라우터 파일.

위 내용은 프론트 엔드 라우팅을 위해 반응 라우터를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!