집 > 기사 > 웹 프론트엔드 > 반응 라우터 4.0에서 서버가 BrowserRouter와 협력하는 방법에 대한 예제 튜토리얼

반응 라우터 4.0에서 서버가 BrowserRouter와 협력하는 방법에 대한 예제 튜토리얼

小云云원래의: 2017-12-29 16:29:072018검색

react-router는 React 프레임워크 라우팅 솔루션으로서 React 프로젝트에서 중요한 역할을 합니다. 이번 글에서는 주로 React-Router 4.0에서 서버가 BrowserRouter와 어떻게 협력하는지에 대한 자세한 설명을 소개하고 있는데, 편집자는 꽤 좋다고 생각해서 지금부터 공유해서 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

6177ae8eed0322e277a7e6c21878d6d7, 4915f05e1fd45774514682b289f54a27, ab736354b76d127562077b87d19fcb68, 918422798e26d25f6fed3e9f4a3226eb

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

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

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

6177ae8eed0322e277a7e6c21878d6d7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

반응 라우터 4.0에서 서버가 BrowserRouter와 협력하는 방법에 대한 예제 튜토리얼

관련 기사