React Router4.0

React Router v4 는 React Router 에 대한 철저한 재 구성 으로 동적 경로 로 React 의 모든 구성 요소 의 사상 에 따라 모든 Route(경로)는 일반적인 React 구성 요소 입 니 다.
BrowserRouter 가 만 든 URL 형식 은 다음 과 같 습 니 다.http://react.com/some/pathHashRouter만 든 URL 형식 은 다음 과 같 습 니 다.http://react.com/#/some/path
BrowserRouter 를 사용 할 때 서버 가 가능 한 모든 URL 을 정확하게 처리 할 수 있 도록 서버 를 설정 해 야 합 니 다.예 를 들 어 브 라 우 저 에서 보 낼 때.http://react.com/some/path 화해시키다http://react.com/some/path2두...서버 는 정확 한 HTML 페이지(즉,단일 페이지 응용 에서 유일한 html 페이지)로 돌아 갈 수 있 습 니 다.HashRouter 를 사용 하면 이 문제 가 존재 하지 않 습 니 다.hash 부분의 내용 은 서버 에서 자동 으로 무시 되 기 때문에 정말 효과 적 인 것 은 hash 앞의 부분 이 고 단일 페이지 응용 에 있어 서 이 부분 은 고정 적 입 니 다.
경로 설정
1.path
(1)BrowserRouter 를 사용 할 때 path 는 이 Route 가 일치 하 는 URL 을 설명 하 는 pathname(2)HashRouter 를 사용 할 때 path 는 이 Route 가 일치 하 는 URL 의 hash 를 설명 합 니 다.
2.match
(1)params:Route 의 path 는 매개 변 수 를 포함 할 수 있 습 니 다.예 를 들 어 매개 변수 id 를 포함 합 니 다.params 는 일치 하 는 URL 에서 path 의 인 자 를 분석 하 는 데 사 용 됩 니 다.예 를 들 어 URL="http://react.com/foo/1시,params={id:1}.(2)isExact:URL 이 완전히 일치 할 때 값 은 true 입 니 다.URL 부분 이 일치 할 때 값 은 false 입 니 다.예 를 들 어 path="/foo",URL="http://react.com/foo"시,완전히 일치 합 니 다."URL="http://react.com/foo/1부분 일치 합 니 다.(3)path:Route 의 path 속성,내장 경로 구축 시 사용 합 니 다.(4)url:URL 의 일치 부분.
3.Route 렌 더 링 구성 요소 의 방식
(1)component component 의 값 은 하나의 구성 요소 입 니 다.URL 이 Route 와 일치 하면 component 속성 이 정의 하 는 구성 요소 가 렌 더 링 됩 니 다.URL="http://react.com/foo"foo 구성 요소 가 렌 더 링 됩 니 다.(2)renderrender 의 값 은 함수 입 니 다.이 함 수 는 React 요 소 를 되 돌려 줍 니 다.이 함 수 는 React 요 소 를 되 돌려 줍 니 다.이런 방식 은 렌 더 링 을 기다 리 는 구성 요소 에 추가 속성 을 편리 하 게 전달 할 수 있다.예:(

)}>Foo 구성 요소 가 추가 data 속성 을 받 았 습 니 다.(3)children 의 값 도 함수 입 니 다.함 수 는 렌 더 링 할 React 요 소 를 되 돌려 줍 니 다.이전 두 가지 방식 과 달리 성공 여부 와 상 관 없 이 children 이 돌아 오 는 구성 요 소 는 렌 더 링 됩 니 다.그러나 일치 하지 않 을 때 match 속성 은 null 입 니 다.예:(

)}/>Route 가 현재 URL 과 일치 하면 렌 더 링 요소 의 루트 div class 를 active 로 설정 합 니 다.
4.Switch 와 exact 는 URL 이 여러 루트 와 일치 할 때 이 루트 들 은 렌 더 링 작업 을 수행 합 니 다.첫 번 째 일치 하 는 Router 만 렌 더 링 하려 면 이 Route 를 Switch 구성 요소 에 패키지 할 수 있 습 니 다.URL 이 Route 와 완전히 일치 하려 면 Route 가 렌 더 링 되 어야 Route 의 exact 속성 을 사용 할 수 있 습 니 다.Switch 와 exact 는 항상 공동으로 사용 되 며,첫 페이지 의 내 비게 이 션 을 사용 합 니 다.예 를 들 면:

Switch 를 사용 하지 않 으 면 URL 의 pathname 이"/posts"일 때 와 일치 합 니 다.exact 를 사용 하지 않 으 면'/'/posts','/user 1'등 거의 모든 URL 이 첫 번 째 Route 와 일치 하고 스위치 가 존재 하기 때문에 뒤의 두 Route 는 영원히 일치 하지 않 습 니 다.URL 의 pathname 이"/"일 때 만 첫 번 째 Route 가 일치 하도록 exact 를 사용 합 니 다.
5.내장 경로
내장 경로 란 Route 렌 더 링 구성 요소 내부 에서 새로운 Route 를 정의 하 는 것 을 말 합 니 다.예 를 들 어 const Posts=({match})=>{

return(
    

        {/*  match.url  ／posts*/}
        
        
    
)

}URL 의 pathname 이"/posts/react"일 때 PostDetail 구성 요소 가 렌 더 링 됩 니 다.URL 의 pathname 이"/posts"일 때 PostList 구성 요소 가 렌 더 링 됩 니 다.Route 의 내장 사용 은 응용 이 더욱 유연 하 게 경 로 를 사용 할 수 있 도록 합 니 다.
6.링크
Link 는 React Router 가 제공 하 는 링크 구성 요소 입 니 다.링크 구성 요 소 는 이 링크 를 클릭 할 때 페이지 의 경로 가 어떻게 되 어야 하 는 지 정의 합 니 다.예 를 들 어 const Navigation=()=>()

)Link 는 to 속성 설명 을 사용 하여 URL 주소 로 탐색 합 니 다.to 는 string 또는 object 형식 일 수 있 습 니 다.object 형식 일 때 pathname,search,hash,state,네 가지 속성 을 포함 할 수 있 습 니 다.예 를 들 어:

pathname:'/posts',
search:'?sort=name',
hash:'#the-hash",
state:{formHome:true}

}/>Link 를 사용 하 는 것 외 에 도 history 대상 을 사용 하여 수 동 으로 내 비게 이 션 을 할 수 있 습 니 다.history 에서 가장 자주 사용 하 는 방법 은 push(path,[state])와 replace(path,[state])입 니 다.push 는 브 라 우 저 기록 에 기록 을 추가 합 니 다.replace 는 이전 기록 으로 바 꿉 니 다.예 를 들 어:
history.push('/posts')history.replace('/posts')
import React from "react";import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function BasicExample() { return (

  

    

      

        Home
      
      

        About
      
      

        Topics
      
    

    


    
    
    
  

);}
function Home() { return (

  
Home

);}
function About() { return (

  
About

);}
function Topics({ match }) { return (

  
Topics
  

    

      Rendering with React
    
    

      Components
    
    

      Props v. State
    
  

  
   
Please select a topic.
}
  />

);}
function Topic({ match }) { return (

  
{match.params.topicId}

);}
export default BasicExample;