클라이언트 라우팅(리액트라우터 사용) 및 서버 측 라우팅

클라이언트 라우팅(리액트라우터 사용) 및 서버 측 라우팅

생각해 봤는데 클라이언트와 서버 간의 라우팅이 헷갈립니다.React를 사용하는 경우요청을 웹 브라우저로 반송하기 전에 서버 측 렌더링을 위해 JS를 사용하고 리액트라우터를 클라이언트 측 라우팅으로 사용하여 SPA로 갱신하지 않고 페이지 간을 전환합니다.

생각나는 것은 다음과 같습니다.

• 트는는 ?떻 ?? ????들어 홈페이지로부터의 ( 「 」 。/home 페이지 「 」 )/posts)
• 라우팅은 서버 측과 클라이언트 중 어느 쪽으로 진행됩니까?
• 처리 방법을 어떻게 알 수 있습니까?

이 답변에서는 React Router 버전 0.13.x에 대해 설명합니다.다음 버전 1.0에서는 구현 상세 내용이 크게 다를 수 있습니다.

서버

은 최소한의 것입니다.server.js리액트 리액트 리액트 리액트 리액트 리액션:

var express = require('express')
var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

var app = express()

// ...express config...

app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>)
    return res.render('react_page', {html: html})
  })
})

갔지?routes은 Routes module .

var React = require('react')
var {DefaultRoute, NotFoundRoute, Route} = require('react-router')

module.exports = [
  <Route path="/" handler={require('./components/App')}>
    {/* ... */}
  </Route>
]

마다, 의 「1회용」을 합니다.Router착신 URL을 스태틱로케이션으로 설정한 인스턴스는 적절한 일치 루트를 설정하기 위해 루트 트리에 대해 해결되며 렌더링되는 최상위 루트핸들러와 각 레벨에서 일치하는 자 루트의 레코드를 사용하여 콜백합니다., 용, 에, 용, 용, 용, 용, 용, 입, when, when, this, when, when, when, this, when, this, this, this,<RouteHandler>일치하는 자경로를 렌더링하는 루트 처리 컴포넌트 내의 컴포넌트.

사용자가 JavaScript를 끄거나 로드 속도가 느릴 경우 클릭하는 링크가 서버에 다시 연결되고 위와 같이 다시 해결됩니다.

고객

은 최소한의 것입니다.client.js같은 루트모듈을 ): "module-module" (module-module)

var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
  React.render(<Handler/>, document.body)
})

했을 때Router.run()단일 요청에 고정 URL이 있는 서버가 아닌 클라이언트에서 URL이 동적으로 설정될 수 있으므로 백그라운드에서 사용자를 위해 라우터 인스턴스를 만듭니다. 이 인스턴스는 앱을 탐색할 때마다 다시 사용됩니다.

를 요.HistoryLocation이는 API를 사용하여 뒤로/앞으로 버튼을 눌렀을 때 올바른 작업이 수행되도록 합니다.여기도 있어요.HashLocation 의 이 변경됩니다.hash이력 엔트리를 작성하고 이벤트를 리슨하여 네비게이션을 트리거합니다.

를 사용하는 <Link>컴포넌트를 하면 '가 됩니다.to경로 이름인 받침대(+)params그리고.query루트에 필요한 데이터그<a>이 컴포넌트에 의해 렌더링되는 것은onClick최종적으로 콜하는 핸들러router.transitionTo()다음과 같이 링크된 소품을 사용하여 라우터 인스턴스로 이동합니다.

  /**
   * Transitions to the URL specified in the arguments by pushing
   * a new URL onto the history stack.
   */
  transitionTo: function (to, params, query) {
    var path = this.makePath(to, params, query);

    if (pendingTransition) {
      // Replace so pending location does not stay in history.
      location.replace(path);
    } else {
      location.push(path);
    }
  },

통상의 링크에서는, 최종적으로 콜 합니다.location.push()사용 중인 위치 유형에서 이전 및 앞으로 버튼을 사용하여 탐색할 수 있도록 이력을 설정하는 세부사항을 처리한 다음 로 다시 호출합니다.router.handleLocationChange()새로운 URL 경로로의 이행을 계속할 수 있음을 라우터에 통지합니다.

다음으로 라우터는 자신의 라우터를 호출합니다.router.dispatch()설정된 루트 중 어떤 루트가 URL과 일치하는지 판별하는 세부사항을 처리하는 새로운 URL을 사용하는 메서드는 일치된 루트에 존재하는 모든 트랜지션훅을 호출합니다.루트 핸들러에 이러한 트랜지션훅을 실장하면 루트가 네비게이션에서 벗어나거나 네비게이트로 이동하려고 할 때 액션을 취할 수 있습니다.또, 마음에 들지 않는 경우, 트랜지션을 중단할 수 있습니다.

되지 않은 경우 입니다.Router.run()URL 및 일치하는 루트의 모든 세부사항을 포함하는 상태 오브젝트와 최상위 핸들러 컴포넌트를 지정합니다.는 " " " 입니다.Router일치하는 최상위 루트핸들러의 렌더링을 처리합니다.

위의 프로세스는 클라이언트에서 새 URL로 이동할 때마다 다시 실행됩니다.

프로젝트 예시

• 리액트 라우터 메가 데모
• 이소형 연구실

1.0에서는 React-Router는 peerDependency로서 이력 모듈에 의존합니다.이 모듈에서는 브라우저에서의 라우팅에 대해 설명합니다.기본적으로는 React-Router는 HTML5 History API를 사용합니다(pushState,replaceState단, 라우팅)을 할 수 .

이것으로 루트 처리는 백그라운드에서 이루어지며, 루트가 변경되면 ReactRouter가 새로운 소품을 루트 핸들러로 전송합니다. 「신규」가 되었습니다.onUpdate변경될 을 제안합니다.트래킹에 이 됩니다. 업데이트에 이 됩니다.페이지 뷰 트래킹 또는 업데이트에 도움이 됩니다.<title>

클라이언트(HTML5 라우팅)

import {Router} from 'react-router'
import routes from './routes'

var el = document.getElementById('root')

function track(){
  // ...
}

// routes can be children
render(<Router onUpdate={track}>{routes}</Router>, el)

클라이언트(해시 기반 라우팅)

import {Router} from 'react-router'
import {createHashHistory} from 'history'
import routes from './routes'

var el = document.getElementById('root')

var history = createHashHistory()

// or routes can be a prop
render(<Router routes={routes} history={history}></Router>, el)

서버

「」를 사용할 수 .ReactRouter.match서버 렌더링 가이드에서 인용한 것입니다.

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'

app.get('*', function(req, res) {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } else {
      res.status(404).send('Not found')
    }
  })
})

언급URL : https://stackoverflow.com/questions/28553904/client-routing-using-react-router-and-server-side-routing