wouter
Bugfixes
켈 이 문서는 Wouter v3 전용입니다. [email protected]에 대한 문서를 여기에서 찾으십시오
<Router /> 구성 요소가 없으므로 완전히 선택 사항 입니다.Route , Link , Switch 및 Redirect 구성 요소를 제공하여 라우터의 모범 사례를 모방합니다.useLocation , useRoute 및 useRouter 와 같은 라우팅 (예 : 애니메이션)에 대한보다 세분화 된 제어를위한 후크 기반 API가 있습니다. ... 나는 wouter를 좋아한다. 작고 고리를 완전히 포용하며 직관적이고 베어 폰 API가 있습니다. 나는 wouter로 반응-로터로 가능한 모든 것을 성취 할 수 있으며, 불편하지 않으면 서 더 미니멀리스트를 느낍니다.
2020 년의 철저한 반응 생태계 인 Matt Miller
Wouter는 많은 개발자와 도서관 저자가 이해하는 간단한 API를 제공합니다. Wouter를 사용하는 몇 가지 주목할만한 프로젝트 : Ultra , React-Three Fiber , Sunmao UI , Million 등.
시작하기
Wouter API
고리 API
useRoute : 경로 일치 및 매개 변수useLocation : 역사와 협력useParams : 일치하는 매개 변수 추출useSearch : 쿼리 문자열useRouter : 라우터 객체에 액세스합니다구성 요소 API
<Route path={pattern} /><Link href={path} /><Switch /><Redirect to={path} /><Router hook={hook} parser={fn} base={basepath} />FAQ 및 코드 레시피
감사의 말
먼저 프로젝트에 wouter를 추가하십시오.
npm i wouter 또는 PreAct를 사용하는 경우 다음 명령 npm i wouter-preact 사용을 사용하십시오.
아래의 간단한 데모 앱을 확인하십시오. 중첩 라우팅과 같은 후크 및 기타 기능을 다루지는 않지만 React 라우터에서 마이그레이션하는 사람들에게는 좋은 출발점입니다.
import { Link , Route , Switch } from "wouter" ;
const App = ( ) => (
< >
< Link href = "/users/1" > Profile </ Link >
< Route path = "/about" > About Us </ Route >
{ /*
Routes below are matched exclusively -
the first matched route gets rendered
*/ }
< Switch >
< Route path = "/inbox" component = { InboxPage } />
< Route path = "/users/:name" >
{ ( params ) => < > Hello, { params . name } ! </ > }
</ Route >
{ /* Default route in a switch */ }
< Route > 404: No such page! </ Route >
</ Switch >
</ >
) ; 이 라이브러리는 ES2020+ 호환성을 위해 설계되었습니다. 이전 브라우저를 지원 해야하는 경우 node_modules 트랜스 파일해야합니다. 또한, 경로 매개 변수 추론을 지원하기 위해 최소 지원형 타이프 스크립트 버전은 4.1입니다.
Wouter에는 3 가지 종류의 API가 제공됩니다 : 저수준 독립형 위치 후크 , 라우팅 및 패턴 매칭 및 React Router의 API와 유사한 전통적인 구성 요소 기반 API가 제공됩니다 .
당신은 당신을 위해 어떤 일이든 자유롭게 선택할 수 있습니다 : 앱을 최대한 작게 유지하고 패턴 일치가 필요하지 않을 때 위치 후크를 사용하십시오. 맞춤형 라우팅 구성 요소를 구축하려면 라우팅 후크를 사용하십시오. 또는 페이지와 탐색이있는 기존 앱을 구축하는 경우 구성 요소가 유용 할 수 있습니다.
활성 링크, 기본 경로, 서버 측 렌더링 등과 같은 고급 제품에 대한 FAQ 및 코드 레시피도 확인하십시오.
위치 후크
이들은 기본 모듈과 별도로 사용할 수 있으며 useState 와 유사한 인터페이스를 가질 수 있습니다. 이 후크는 중첩, 기본 경로, 경로 일치를 지원하지 않습니다.
import { useBrowserLocation } from "wouter/use-browser-location" 브라우저 주소 막대에서 현재 위치를 조작 할 수 있습니다.import { useHashLocation } from "wouter/use-hash-location" 마찬가지로 주소의 해시 부분, 즉 # 이후의 문자열에서 위치를 얻습니다.import { memoryLocation } from "wouter/memory-location" 히스토리 지원, 외부 탐색 및 테스트를위한 불변 모드가 포함 된 메모리 내 위치 후크. 모듈 이름은 고차 후크이므로 참고하십시오 . 테스트에서 메모리 위치를 어떻게 사용하는지 확인하십시오.라우팅 후크
wouter 모듈에서 가져옵니다.
useRoute - 현재 페이지가 제공된 패턴과 일치하는지 여부를 보여줍니다.useLocation - 기본적으로 브라우저 위치에 구독하여 현재 라우터 위치를 조작 할 수 있습니다. 참고 : 이것은 useBrowserLocation 과 동일하지 않으며 아래를 참조하십시오.useParams - 가장 가까운 경로에서 일치하는 매개 변수가있는 객체를 반환합니다.useSearch - 검색 문자열을 반환합니다 ? .useRouter - 구성을 보유하는 글로벌 라우터 객체를 반환합니다. 라우팅을 사용자 정의하려는 경우에만 사용하십시오.구성 요소
wouter 모듈에서 가져옵니다.
<Route /> - 조건부로 패턴을 기반으로 구성 요소를 렌더링합니다.<Link /> - 랩 <a> , 내비게이션을 수행 할 수 있습니다.<Switch /> - 독점 라우팅은 첫 번째 일치하는 경로 만 렌더링합니다.<Redirect /> - 렌더링되면 즉시 탐색을 수행합니다.<Router /> -고급 라우팅 구성을위한 선택적 최상위 구성 요소. useRoute : 경로 일치 및 매개 변수 현재 위치가 제공된 패턴과 일치하는지 확인하고 매개 변수로 객체를 반환합니다. 이것은 훌륭한 regexparam 라이브러리로 구동되므로 모든 패턴 구문이 완전히 지원됩니다.
useRoute 사용하여 수동 라우팅을 수행하거나 경로 전환 등과 같은 사용자 지정 로직을 구현할 수 있습니다.
import { useRoute } from "wouter" ;
const Users = ( ) => {
// `match` is a boolean
const [ match , params ] = useRoute ( "/users/:name" ) ;
if ( match ) {
return < > Hello, { params . name } ! </ > ;
} else {
return null ;
}
} ;어떤 유형의 세그먼트가 지원되는지에 대한 빠른 치트 시트 :
useRoute ( "/app/:page" ) ;
useRoute ( "/app/:page/:section" ) ;
// optional parameter, matches "/en/home" and "/home"
useRoute ( "/:locale?/home" ) ;
// suffixes
useRoute ( "/movies/:title.(mp4|mov)" ) ;
// wildcards, matches "/app", "/app-1", "/app/home"
useRoute ( "/app*" ) ;
// optional wildcards, matches "/orders", "/orders/"
// and "/orders/completed/list"
useRoute ( "/orders/*?" ) ;
// regex for matching complex patterns,
// matches "/hello:123"
useRoute ( / ^[/]([a-z]+):([0-9]+)[/]?$ / ) ;
// and with named capture groups
useRoute ( / ^[/](?<word>[a-z]+):(?<num>[0-9]+)[/]?$ / ) ; 쌍 params 의 두 번째 항목은 매개 변수 또는 일치가없는 경우 NULL이있는 객체입니다. 와일드 카드 세그먼트의 경우 매개 변수 이름은 "*" 입니다.
// wildcards, matches "/app", "/app-1", "/app/home"
const [ match , params ] = useRoute ( "/app*" ) ;
if ( match ) {
// "/home" for "/app/home"
const page = params [ "*" ] ;
}useLocation : 역사와 협력 현재 경로를 가져 와서 페이지를 탐색하려면 useLocation 후크를 호출하십시오. useState 와 마찬가지로 값과 세트를 반환합니다. 위치가 변경 될 때 구성 요소가 다시 렌더링되고 navigate 호출하면이 값을 업데이트하고 내비게이션을 수행 할 수 있습니다.
기본적으로 후드 아래에서 useBrowserLocation 사용하지만 최상위 Router 구성 요소에서이를 구성 할 수 있습니다 (예 : 어느 시점에서 해시 기반 라우팅으로 전환하기로 결정한 경우). useLocation 중첩 경로 내에서 또는 기본 경로 설정과 함께 사용될 때도 경로를 반환합니다.
import { useLocation } from "wouter" ;
const CurrentLocation = ( ) => {
const [ location , navigate ] = useLocation ( ) ;
return (
< div >
{ `The current page is: ${ location } ` }
< a onClick = { ( ) => navigate ( "/somewhere" ) } > Click to update </ a >
</ div >
) ;
} ; 모든 구성 요소는 내부적으로 useLocation 후크를 호출합니다.
useLocation 의 Setter 메소드는 또한 내비게이션 업데이트가 어떻게 발생하는지 제어하기 위해 매개 변수가있는 선택적 객체를 수락 할 수 있습니다.
브라우저 위치를 사용하는 경우 (기본값), useLocation Hook는 새를 추가하는 대신 현재 이력 항목을 수정하기 위해 후크를 알려주기 위해 플래그를 replace 할 수 있습니다. replaceState 호출하는 것과 동일합니다.
const [ location , navigate ] = useLocation ( ) ;
navigate ( "/jobs" ) ; // `pushState` is used
navigate ( "/home" , { replace : true } ) ; // `replaceState` is used 또한 탐색 중에 history.state 업데이트 할 수있는 state 옵션을 제공 할 수 있습니다.
navigate ( "/home" , { state : { modal : "promo" } } ) ;
history . state ; // { modal: "promo" } 기본적으로 Wouter는 useLocation Hook를 사용하여 useBrowserLocation 통해 pushState 및 Navigation을 replaceState 에 반응합니다.
이를 사용자 정의하려면 Router 구성 요소로 앱을 감싸십시오.
import { Router , Route } from "wouter" ;
import { useHashLocation } from "wouter/use-hash-location" ;
const App = ( ) => (
< Router hook = { useHashLocation } >
< Route path = "/about" component = { About } />
...
</ Router >
) ; 이러한 후크에는 useState 와 유사한 반환 값이 있으므로 useCrossTabLocation , useLocalStorage , useMicroFrontendLocation 및 앱에서 지원하려는 모든 라우팅 논리와 같은 위치 후크를 구축하는 것이 쉽고 재미 있습니다. 시도해보세요!
useParams : 일치하는 매개 변수 추출 이 후크를 사용하면 일치하는 동적 세그먼트를 통해 노출 된 매개 변수에 액세스 할 수 있습니다. 내부적으로, 우리는 단순히 컨텍스트 제공 업체에서 구성 요소를 래프하면 Route 구성 요소 내 어디서나이 데이터에 액세스 할 수 있습니다.
이를 통해 경로 내에서 깊게 중첩 된 구성 요소를 처리 할 때 "소품 시추"를 피할 수 있습니다. 참고 : useParams 가장 가까운 상위 경로에서 매개 변수 만 추출합니다.
import { Route , useParams } from "wouter" ;
const User = ( ) => {
const params = useParams ( ) ;
params . id ; // "1"
// alternatively, use the index to access the prop
params [ 0 ] ; // "1"
} ;
< Route path = "/user/:id" component = { User } > / >REGEX 경로와 동일합니다. 캡처 그룹은 지수 또는 명명 된 캡처 그룹이있는 경우 대신 사용할 수있는 캡처 그룹에 액세스 할 수 있습니다.
import { Route , useParams } from "wouter" ;
const User = ( ) => {
const params = useParams ( ) ;
params . id ; // "1"
params [ 0 ] ; // "1"
} ;
< Route path = { / ^[/]user[/](?<id>[0-9]+)[/]?$ / } component = { User } > / >useSearch : 쿼리 문자열 이 후크를 사용하여 현재 검색 (쿼리) 문자열 값을 얻으십시오. 문자열 자체가 전체 위치가 업데이트되지 않은 경우에만 구성 요소가 다시 렌더링됩니다. 반환 된 검색 문자열에는 A가 포함되어 있지 않습니까 ? 성격.
import { useSearch } from "wouter" ;
// returns "tab=settings&id=1"
// the hook for extracting search parameters is coming soon!
const searchString = useSearch ( ) ; SSR의 경우 라우터로 전달 된 ssrSearch Prop을 사용하십시오.
< Router ssrSearch = { request . search } > { /* SSR! */ } </ Router >렌더링 및 수화에 대한 자세한 정보는 서버 측 렌더링을 참조하십시오.
useRouter : 라우터 객체에 액세스합니다 고급 통합 (예 : Custom Location Hook)을 구축하는 경우 글로벌 라우터 객체에 액세스 할 수 있습니다. 라우터는 Router 구성 요소에서 구성하는 라우팅 옵션을 보유하는 간단한 객체입니다.
import { useRouter } from "wouter" ;
const Custom = ( ) => {
const router = useRouter ( ) ;
router . hook ; // `useBrowserLocation` by default
router . base ; // "/app"
} ;
const App = ( ) => (
< Router base = "/app" >
< Custom />
</ Router >
) ; <Route path={pattern} /> Route 패턴 path 를 기반으로 조건부로 렌더링되는 앱의 조각을 나타냅니다. 패턴은 사용자가 useRoute 에 전달되는 인수와 동일한 구문을 가지고 있습니다.
도서관은 경로의 본문을 선언하는 여러 가지 방법을 제공합니다.
import { Route } from "wouter" ;
// simple form
< Route path = "/home" > < Home /> </ Route >
// render-prop style
< Route path = "/users/:id" >
{ params => < UserPage id = { params . id } /> }
</ Route >
// the `params` prop will be passed down to <Orders />
< Route path = "/orders/:status" component = { Orders } /> 경로가없는 경로는 항상 일치하는 것으로 간주되며 <Route path="*" /> 와 동일합니다. 앱을 개발할 때이 트릭을 사용하여 내비게이션없이 경로의 콘텐츠를 살펴보십시오.
- <Route path="/some/page">
+ <Route>
{/* Strip out the `path` to make this visible */}
</Route> Nesting은 Wouter의 핵심 기능이며 nest Prop를 통해 경로에서 활성화 할 수 있습니다. 이 소품이 존재하면 경로는 주어진 패턴으로 시작하는 모든 것을 일치시키고 중첩 라우팅 컨텍스트를 만듭니다. 모든 아동 노선은 해당 패턴에 비해 위치를받습니다.
이 예를 살펴 보겠습니다.
< Route path = "/app" nest >
< Route path = "/users/:id" nest >
< Route path = "/orders" />
</ Route >
</ Route > 이 첫 번째 경로는 /app 으로 시작하는 모든 경로에 대해 활성화되며, 이는 앱에 기본 경로가있는 것과 같습니다.
두 번째는 동적 패턴을 사용하여 /app/user/1 , /app/user/1/anything 간과 같은 경로와 일치합니다.
마지막으로, 내부 경로는 /app/users/1/orders 모양의 경로에만 작동합니다. 그 경로에는 nest 소품이없고 평소와 같이 작동하기 때문에 경기는 엄격합니다.
마지막 경로 내에서 useLocation() 호출하면 /app/users/1/orders /orders 아니며 주문/주문됩니다. 이것은 좋은 격리를 만들어 내고 나머지 앱이 작동을 멈출까 걱정하지 않고 부모 경로를 쉽게 변경할 수있게합니다. 그러나 최상위 페이지로 이동 해야하는 경우 Prefix ~ 사용하여 절대 경로를 참조 할 수 있습니다.
< Route path = "/payments" nest >
< Route path = "/all" >
< Link to = "~/home" > Back to Home </ Link >
</ Route >
</ Route > 참고 : nest Prop은 Regex를 Regex 경로로 변경하지 않습니다. 대신, nest Prop은 중첩 경로가 나머지 경로 또는 동일한 경로와 일치하는지 확인합니다. 엄격한 경로 regex를 만들려면 /^[/](your pattern)[/]?$/ 와 같은 Regex 패턴을 사용하십시오 (이것은 선택적인 엔드 슬래시와 문자열의 끝과 일치). 중첩 가능한 regex를 만들려면 /^[/](your pattern)(?=$|[/])/ 와 같은 정규 패턴을 사용하십시오 (이것은 문자열의 끝 또는 미래 세그먼트의 슬래시와 일치).
<Link href={path} /> 링크 구성 요소는 클릭하면 내비게이션을 수행하는 <a /> 요소를 렌더링합니다.
import { Link } from "wouter"
< Link href = "/" > Home </ Link >
// `to` is an alias for `href`
< Link to = "/" > Home < / Link>
// all standard `a` props are proxied
< Link href = "/" className = "link" aria-label = "Go to homepage" > Home </ Link >
// all location hook options are supported
< Link href = "/" replace state = { { animate : true } } / > asChild Prop이 제공되지 않는 한 링크는 항상 어린이를 <a /> 태그로 랩핑합니다. 후드 아래에서 <a /> 를 렌더링하는 사용자 정의 구성 요소가 있어야 할 때 이것을 사용하십시오.
// use this instead
< Link to = "/" asChild >
< UIKitLink />
</ Link >
// Remember, `UIKitLink` must implement an `onClick` handler
// in order for navigation to work! className 소품으로 함수를 전달하면 링크가 현재 경로에 대해 활성화되어 있는지를 나타내는 부울 값으로 호출됩니다. 이것을 사용하여 스타일 활성 링크 (예 : 탐색 메뉴의 링크)를 사용할 수 있습니다.
< Link className = { ( active ) => ( active ? "active" : "" ) } > Nav </ Link >활성 링크에 대한 자세한 내용은 여기를 참조하십시오.
<Switch /> 독점 라우팅을 원하는 경우가 있습니다. 경로가 겹치는 패턴이 있더라도 당시에 하나의 경로 만 렌더링되도록하는 경우가 있습니다. 그것이 바로 Switch 하는 일입니다. 첫 번째 일치하는 경로 만 렌더링합니다.
import { Route , Switch } from "wouter" ;
< Switch >
< Route path = "/orders/all" component = { AllOrders } />
< Route path = "/orders/:status" component = { Orders } />
{ /*
in wouter, any Route with empty path is considered always active.
This can be used to achieve "default" route behaviour within Switch.
Note: the order matters! See examples below.
*/ }
< Route > This is rendered when nothing above has matched </ Route >
</ Switch > ; 스위치 일치에서 경로가 없으면 마지막 빈 Route 폴백으로 사용됩니다. 기본 경로에 대해 읽으려면 FAQ 및 코드 레시피 섹션을 참조하십시오.
<Redirect to={path} /> 마운트가 제공된 path 로 리디렉션을 수행 할 때. useLocation 후크를 내부적으로 사용하여 useEffect 블록 내부에서 내비게이션을 트리거합니다.
Redirect 또한 탐색시 이력 상태를 설정하기 위해 내비게이션이 수행되는 방법을 사용자 정의하기위한 소품을 허용 할 수 있습니다. 이 옵션은 현재 사용되는 위치 후크에만 해당됩니다.
< Redirect to = "/" />
// arbitrary state object
< Redirect to = "/" state = { { modal : true } } / >
// use `replaceState`
< Redirect to = "/" replace /> 예를 들어 이벤트 핸들러 내부의 리디렉션을 트리거하기 위해 내비게이션을 위해 더 많은 고급 로직이 필요한 경우 대신 useLocation 후크 사용을 고려하십시오.
import { useLocation } from "wouter" ;
const [ location , setLocation ] = useLocation ( ) ;
fetchOrders ( ) . then ( ( orders ) => {
setOrders ( orders ) ;
setLocation ( "/app/orders" ) ;
} ) ;<Router hook={hook} parser={fn} base={basepath} hrefs={fn} />React 라우터 와 달리 Wouter의 경로는 최상위 구성 요소로 싸울 필요가 없습니다 . 내부 라우터 객체는 주문형으로 구성되므로 최상위 수준의 제공 업체로 오염되지 않고 앱을 작성하기 시작할 수 있습니다. 그러나 라우팅 동작을 사용자 정의 해야하는 경우가 있습니다.
이러한 경우 해시 기반 라우팅, Basepath 지원, 사용자 정의 매칭 기능 등이 포함됩니다.
import { useHashLocation } from "wouter/use-hash-location" ;
< Router hook = { useHashLocation } base = "/app" >
{ /* Your app goes here */ }
</ Router > ; 라우터는 라우팅 구성 옵션을 보유하는 간단한 객체입니다. useRouter 후크를 사용하여 언제든지이 객체를 얻을 수 있습니다. 현재 사용 가능한 옵션 목록 :
hook: () => [location: string, setLocation: fn] - 위치 변경에 가입하는 React Hook 함수입니다. 현재 location 문자열 쌍을 반환합니다. 예를 들어 /app/users 와 내비게이션을위한 setLocation 함수를 반환합니다. useLocation() hook를 호출하여 앱의 모든 구성 요소 에서이 후크를 사용할 수 있습니다. 위치 후크 사용자 정의를 참조하십시오.
searchHook: () => [search: string, setSearch: fn] - hook 와 유사하지만 현재 검색 문자열을 얻기 위해.
base: string - /app 과 같은 기본 경로를 지정할 수있는 선택적 설정입니다. 모든 신청 경로는 해당 경로와 관련이 있습니다. 절대 경로로 이동하려면 경로를 ~ 로 접두사하십시오. FAQ를 참조하십시오.
parser: (path: string, loose?: boolean) => { pattern, keys } - 패턴 구문 분석 기능. /app/users/:id 와 같은 사용자 정의 패턴과 현재 위치를 일치시키기위한 Regexp를 생성합니다. regexparam 의 parse 기능과 동일한 인터페이스가 있습니다. 사용자 정의 파서 기능을 보여주는이 예제를 참조하십시오.
ssrPath: string 및 ssrSearch: string 서버에서 앱을 렌더링 할 때이를 사용하십시오.
hrefs: (href: boolean) => string - Link 에 의해 렌더링 된 <a /> 요소의 href 속성을 변환하기위한 함수. 해시 기반 라우팅을 지원하는 데 사용됩니다. 기본적으로 href 속성은 href 또는 Link 의 소품 to 동일합니다. 위치 후크는 hook.hrefs 정의 할 수 있습니다. hrefs 속성,이 경우 href 추론됩니다.
당신은 할 수 있습니다! <Router base="/app" /> 구성 요소로 앱을 랩핑하면 트릭을 수행해야합니다.
import { Router , Route , Link } from "wouter" ;
const App = ( ) => (
< Router base = "/app" >
{ /* the link's href attribute will be "/app/users" */ }
< Link href = "/users" > Users </ Link >
< Route path = "/users" > The current path is /app/users! </ Route >
</ Router >
) ; 기본 경로가있는 앱의 경로 내에서 useLocation() 호출하면 기본으로 스코핑 된 경로를 반환합니다. 기본이 "/app" 이고 PathName이 "/app/users" 인 경우 리턴 된 문자열은 "/users" 입니다. 따라서 Calling navigate 기본이 귀하를위한 경로 인수에 자동으로 추가됩니다.
중첩 된 라우터가 여러 개 있으면 기본 경로가 상속되어 쌓입니다.
< Router base = "/app" >
< Router base = "/cms" >
< Route path = "/users" > Path is /app/cms/users! </ Route >
</ Router >
</ Router > 응용 프로그램 라우팅의 일반적인 패턴 중 하나는 다른 경로 일치가 일치하지 않는 경우 (예 : 404 메시지를 렌더링 해야하는 경우) 폴백으로 표시되는 기본 경로가있는 것입니다. Wouter 에서는 <Switch /> 구성 요소와 기본 경로의 조합으로 쉽게 수행 할 수 있습니다.
import { Switch , Route } from "wouter" ;
< Switch >
< Route path = "/about" > ... </ Route >
< Route > 404, Not Found! </ Route >
</ Switch > ;참고 : 스위치 아동의 순서가 중요합니다. 기본 경로는 항상 마지막으로 나와야합니다.
경로의 일치하는 세그먼트에 액세스하려면 와일드 카드 매개 변수를 사용할 수 있습니다.
< Switch >
< Route path = "/users" > ... </ Route >
{ /* will match anything that starts with /users/, e.g. /users/foo, /users/1/edit etc. */ }
< Route path = "/users/*" > ... </ Route >
{ /* will match everything else */ }
< Route path = "*" >
{ ( params ) => `404, Sorry the page ${ params [ "*" ] } does not exist!` }
</ Route >
</ Switch >▶ 데모 샌드 박스
일반 className 문자열 대신이 링크가 현재 경로와 일치 할 때 사용자 정의 클래스를 사용할 함수를 제공하십시오. 항상 정확한 일치를 수행합니다 (IE /users /users/1 에 대해 활성화되지 않습니다).
< Link className = { ( active ) => ( active ? "active" : "" ) } > Nav link </ Link > aria-current 또는 style 과 같은 다른 소품을 제어 해야하는 경우 자신의 <Link /> 래퍼를 작성하고 useRoute 후크를 사용하여 경로가 활성화되어 있는지 감지 할 수 있습니다.
const [ isActive ] = useRoute ( props . href ) ;
return (
< Link { ... props } asChild >
< a style = { isActive ? { color : "red" } : { } } > { props . children } </ a >
</ Link >
) ;▶ 데모 샌드 박스
앱의 라우팅에 후행 슬래시가 중요하다면 사용자 정의 구문자를 지정할 수 있습니다. Parser는 패턴 문자열을 취하고 Regexp와 구문 분석 키 배열을 반환하는 메소드입니다. regexparam 의 구문 parse 기능의 서명을 사용합니다.
엄격한 경로 옵션을 지원하는 인기있는 path-to-regexp 패키지를 기반으로 사용자 정의 파서를 작성해 봅시다.
import { pathToRegexp } from "path-to-regexp" ;
/**
* Custom parser based on `pathToRegexp` with strict route option
*/
const strictParser = ( path , loose ) => {
const keys = [ ] ;
const pattern = pathToRegexp ( path , keys , { strict : true , end : ! loose } ) ;
return {
pattern ,
// `pathToRegexp` returns some metadata about the keys,
// we want to strip it to just an array of keys
keys : keys . map ( ( k ) => k . name ) ,
} ;
} ;
const App = ( ) => (
< Router parser = { strictParser } >
< Route path = "/foo" > ... </ Route >
< Route path = "/foo/" > ... </ Route >
</ Router >
) ;▶ 데모 샌드 박스
예! nest Prop가있는 모든 경로는 둥지 컨텍스트를 만듭니다. 중첩 노선 내부의 위치는 범위가납니다.
const App = ( ) => (
< Router base = "/app" >
< Route path = "/dashboard" nest >
{ /* the href is "/app/dashboard/users" */ }
< Link to = "/users" />
< Route path = "/users" >
{ /* Here `useLocation()` returns "/users"! */ }
</ Route >
</ Route >
</ Router >
) ;▶ 데모 샌드 박스
예, navigate 기능은 "wouter/use-browser-location" 모듈에서 노출됩니다.
import { navigate } from "wouter/use-browser-location" ;
navigate ( "/" , { replace : true } ) ;내부적으로 사용되는 것과 동일한 기능입니다.
예! 프로젝트는 TypeScript로 작성되지 않지만 유형 정의 파일은 패키지와 함께 번들로 제공됩니다.
framer-motion 으로 Wouter 경로를 어떻게 애니메이션 할 수 있는지 살펴 보겠습니다. 애니메이션 엔지스 전환은 쉽지만 종료 전환에는 좀 더 많은 작업이 필요합니다. 출구 애니메이션이 완료 될 때까지 DOM의 페이지를 유지하는 AnimatePresence 구성 요소를 사용합니다.
불행히도, AnimatePresence 직접적인 아이들 만을 애니메이션으로 만듭니다. 그래서 이것은 효과가 없습니다.
import { motion , AnimatePresence } from "framer-motion" ;
export const MyComponent = ( ) => (
< AnimatePresence >
{ /* This will not work! `motion.div` is not a direct child */ }
< Route path = "/" >
< motion . div
initial = { { opacity : 0 } }
animate = { { opacity : 1 } }
exit = { { opacity : 0 } }
/>
</ Route >
</ AnimatePresence >
) ; 해결 방법은이 경로와 수동으로 useRoute 와 일치하는 것입니다.
export const MyComponent = ( { isVisible } ) => {
const [ isMatch ] = useRoute ( "/" ) ;
return (
< AnimatePresence >
{ isMatch && (
< motion . div
initial = { { opacity : 0 } }
animate = { { opacity : 1 } }
exit = { { opacity : 0 } }
/>
) }
</ AnimatePresence >
) ;
} ; 보다 복잡한 예제에는 useRoutes 훅 사용 (React Router가 수행하는 방식과 유사)이 포함되지만 Wouter는 상자 밖으로 배송되지 않습니다. 해결 방법은이 문제를 참조하십시오.
PREACT 내보내기는 wouter-preact 라는 별도의 패키지 (또는 wouter/preact 네임 스페이스 내에서 사용할 수 있지만이 메소드는 피어 의존성으로 반응이 필요하므로 권장되지 않습니다).
- import { useRoute, Route, Switch } from "wouter";
+ import { useRoute, Route, Switch } from "wouter-preact";후크를 지원하는 최신 버전의 preact x가 있는지 확인해야 할 수도 있습니다.
▶ 데모 샌드 박스
서버에서 앱을 렌더링하려면 최상위 라우터로 앱을 래프하고 ssrPath PROP (일반적으로 현재 요청에서 파생)를 지정해야합니다. 선택적으로 Router 서버에서 검색 문자열에 액세스 해야하는 경우 ssrSearch 매개 변수를 허용합니다.
import { renderToString } from "react-dom/server" ;
import { Router } from "wouter" ;
const handleRequest = ( req , res ) => {
// top-level Router is mandatory in SSR mode
const prerendered = renderToString (
< Router ssrPath = { req . path } ssrSearch = { req . search } >
< App />
</ Router >
) ;
// respond with prerendered html
} ; 팁 : ssrPath 포함되어 있다면 Wouter는 ssrSearch 미리 채울 수 있습니까 ? 성격. 그래서 이것들은 다음과 같습니다.
< Router ssrPath = "/goods?sort=asc" /> ;
// is the same as
< Router ssrPath = "/goods" ssrSearch = "sort=asc" /> ; 클라이언트의 경우 앱이 대화식이 되려면 정적 마크 업을 수화해야합니다. 수화 경고를 피하기 위해 클라이언트에 렌더링 된 JSX는 서버가 사용하는 것과 일치해야하므로 Router 구성 요소가 있어야합니다.
import { hydrateRoot } from "react-dom/client" ;
const root = hydrateRoot (
domNode ,
// during hydration, `ssrPath` is set to `location.pathname`,
// `ssrSearch` set to `location.search` accordingly
// so there is no need to explicitly specify them
< Router >
< App />
</ Router >
) ;▶ 데모
Wouter로 테스트하는 것은 일반 React 앱을 테스트하는 것과 다르지 않습니다. 특정 경로를 렌더링하기 위해 현재 위치에 고정물을 제공하는 방법이 종종 필요합니다. 일반 위치 후크를 memoryLocation 로 교체하여 쉽게 수행 할 수 있습니다. 최상위 Router 에서 지정할 수있는 후크를 반환하는 초기화 기능입니다.
import { render } from "@testing-library/react" ;
import { memoryLocation } from "wouter/memory-location" ;
it ( "renders a user page" , ( ) => {
// `static` option makes it immutable
// even if you call `navigate` somewhere in the app location won't change
const { hook } = memoryLocation ( { path : "/user/2" , static : true } ) ;
const { container } = render (
< Router hook = { hook } >
< Route path = "/user/:id" > { ( params ) => < > User ID: { params . id } </ > } </ Route >
</ Router >
) ;
expect ( container . innerHTML ) . toBe ( "User ID: 2" ) ;
} ) ; 후크는 내비게이션 기록을 기록하도록 구성 할 수 있습니다. 또한 외부 탐색을위한 navigate 기능이 제공됩니다.
it ( "performs a redirect" , ( ) => {
const { hook , history , navigate } = memoryLocation ( {
path : "/" ,
// will store navigation history in `history`
record : true ,
} ) ;
const { container } = render (
< Router hook = { hook } >
< Switch >
< Route path = "/" > Index </ Route >
< Route path = "/orders" > Orders </ Route >
< Route >
< Redirect to = "/orders" />
</ Route >
</ Switch >
</ Router >
) ;
expect ( history ) . toStrictEqual ( [ "/" ] ) ;
navigate ( "/unknown/route" ) ;
expect ( container . innerHTML ) . toBe ( "Orders" ) ;
expect ( history ) . toStrictEqual ( [ "/" , "/unknown/route" , "/orders" ] ) ;
} ) ; 우리는 당신에게 좋은 소식이 있습니다! 미니멀리스트 번들 크기의 유목민이고 앱에 간단한 라우팅이 필요한 경우 베어 위치 후크 만 사용할 수 있습니다. 예를 들어, 650 바이트 인 useBrowserLocation 후크는 현재 위치와 현재 위치와 수동으로 일치합니다.
import { useBrowserLocation } from "wouter/use-browser-location" ;
const UsersRoute = ( ) => {
const [ location ] = useBrowserLocation ( ) ;
if ( location !== "/users" ) return null ;
// render the route
} ;Wouter의 모토는 "미니멀리스트 친화적입니다" 입니다.
Wouter Illustrations와 Logos는 Katya Simacheva와 Katya Vakulenko가 제작했습니다. @jeetiss 와 개발에 도움을 주신 놀라운 기여자들에게 감사합니다.
