BrowserRouter가 반응 라우터 서버와 협력하는 방법

이 글은 주로 React-Router 4.0에서 서버가 BrowserRouter와 어떻게 협력하는지에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

react-router는 React 프레임워크 라우팅 솔루션으로서 React 프로젝트에서 중요한 역할을 합니다.

react-router 버전 4.0에서는 이전 버전에 비해 API가 크게 수정되었습니다. 2.0 및 3.0에서 일반적으로 사용되는 구성 요소는 더 이상 기본 라우팅 구성 구성 요소로 사용되지 않습니다.

, , ,

구성요소는 "URL" 정보를 메모리에 저장하고 브라우저의 주소 표시줄은 React Native와 같은 비브라우저 환경이나 테스트 환경에서 자주 사용됩니다.

구성 요소는 이름에서 알 수 있듯이 경로를 수정하지 않으며 서버 측 렌더링 중에 매우 유용합니다.

컴포넌트 우리에게 가장 친숙한 라우팅 컴포넌트에 대해 자세히 설명할 필요는 없습니다. 여기서는 React-Router에서 권장하는

및 는 모두 프런트 엔드 라우팅 기능을 구현할 수 있으며, 전자는 rul의 경로 이름 세그먼트를 기반으로 하고 후자는 해시 세그먼트를 기반으로 한다는 점입니다. .

전자: http://127.0.0.1:3000/article/num1

후자: http://127.0.0.1:3000/#/article/num1 (꼭 그런 것은 아니지만 #은 필수입니다. )

이 차이로 인해 발생하는 직접적인 문제는 두 번째 수준 또는 다중 수준 라우팅 상태에서 페이지를 새로 고칠 때 가 현재 경로를 서버로 보내지만(경로 이름이기 때문에) 는 그렇지 않습니다(해시 세그먼트이기 때문입니다).

우리는 프론트엔드 경로가 백엔드로 전송되는 것을 원하지 않습니다.

react-router 4.0 문서에는 다음 구절이 있습니다.

참고: 해시를 사용하여 탐색 기록을 기록하는 것은 location.key 및 location.state를 지원하지 않습니다. 이전 릴리스에서는 이 동작에 대한 shim을 제공했지만 여전히 해결할 수 없는 몇 가지 문제가 있었습니다. 이 동작에 의존하는 코드나 플러그인은 제대로 작동하지 않습니다. 이 기술은 레거시 브라우저만 지원하도록 설계되었으므로 브라우저에서 사용할 경우 를 대신 사용할 수 있습니다.

몇 가지 간단한 수정을 위해서는 서버가 프런트 엔드와 협력해야 합니다.

수정 아이디어는 요청한 URL이 작동하지 않고 프런트 엔드 경로일 때 항목 html 파일(내 배경은 nodejs)을 다시 로드하는 것입니다.

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  //判断是主动导向404页面，还是传来的前端路由。
　　 //如果是前端路由则如下处理

  fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
    if(err){
      console.log(err);
      res.send('后台错误');
    } else {
      res.writeHead(200, {
        'Content-type': 'text/html',
        'Connection':'keep-alive'
      });
      res.end(data);
    }
  })
});

여기에는 수많은 함정이 있습니다. 인터넷에서 메소드를 검색한 후 nginx로 전환하고 try_files 필드를 사용하여 항목 html로 이동했습니다. 그러나 리디렉션 후 webpack으로 패키지된 js 파일이 실행되지 않았습니다.

firebug를 검사할 때 이 새로 고침의 응답 헤더에 "Connection":"keep-alive"가 설정되어 있는 것을 발견했습니다.

문제는 nodejs로 전환하고 keep-alive와 함께 200 상태를 사용하는 것이 해결되어야 한다고 생각합니다. 문제.

react-router 4.0 다중 레벨 라우팅에서 페이지를 새로 고치면 더 이상 404가 발생하지 않지만 프런트엔드 상태는 저장됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

React Native의 도메인 간 리소스 오류 문제

nodejs에 최신 버전의 npm 설치(자세한 튜토리얼)

js에서 디바운스 기능을 구현하는 방법(자세한 튜토리얼)

vue-scroller에서 스크롤 위치를 표시하고 기록하는 방법

WeChat 애플릿이 검토를 통과하지 못하면 어떻게 해야 하나요?

스와이프를 사용하여 슬라이딩 콘텐츠를 변경하는 방법(상세 튜토리얼)

Vue.js 2.0을 사용하여 배경 비디오 로그인 페이지를 구현하는 방법

위 내용은 BrowserRouter가 반응 라우터 서버와 협력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!