wouter
Bugfixes
配x 這些文檔僅適用於wouter v3。請在此處找到[email protected]的文檔
<Router />組件，它是完全可選的。Route ， Link ， Switch和Redirect組件，模仿React Rouyter的最佳實踐。useLocation ， useRoute和useRouter 。 ...我愛Wouter。它很小，完全包含鉤子，並且具有直觀的和準骨API。我可以用wouter來完成我的一切能力，而且感覺更簡約，而又沒有不便。
馬特·米勒（Matt Miller） ， 2020年詳盡的反應生態系統
Wouter提供了一個簡單的API，許多開發人員和圖書館作者都喜歡。一些使用Wouter的著名項目： Ultra ， React三纖維， Sunmao UI ，百萬等。
入門
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} />常見問題和代碼食譜
致謝
首先，將Wouter添加到您的項目中。
npm i wouter或者，如果您使用的是提前使用，則使用以下命令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配備了三種API：低級獨立位置掛鉤，用於路由和模式匹配的鉤子以及類似於React Router的基於組件的API 。
您可以自由選擇適合自己的任何方法：在要保持應用盡可能小並且不需要模式匹配時使用位置掛鉤；要構建自定義路由組件時，請使用路由鉤；或者，如果您正在構建帶有頁面和導航的傳統應用程序 - 組件可能會派上用場。
還請查看常見問題和代碼配方，以獲取更多高級鏈接，默認路線，服務器端渲染等。
位置鉤子
這些可以與主模塊分開使用，並具有類似於useState的接口。這些鉤子不支持嵌套，基本路徑，路線匹配。
import { useBrowserLocation } from "wouter/use-browser-location" - 允許操縱瀏覽器地址欄中的當前位置，這是歷史記錄API的小包裝。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 Hook。與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 Hook。
useLocation的設置器方法還可以接受具有參數的可選對象，以控制導航更新將如何發生。
當使用瀏覽器位置（默認）時， 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進行反應並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 ， useMicroFrontendLocation構建useLocalStorage自己的位置掛鉤很容易且有趣。嘗試一下！
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 } > / >正則路徑是相同的。可以通過其索引訪問捕獲組，或者如果有一個命名的捕獲組，則可以使用。
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 ：查詢字符串使用此鉤獲取當前搜索（查詢）字符串值。僅當字符串本身而不是完整的位置更新時，它將導致您的組件重新渲染。返回的搜索字符串不包含?特點。
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 ：訪問路由器對象如果您要構建高級集成，例如自定義位置掛鉤，則可能需要訪問全局路由器對象。路由器是一個簡單的對象，可容納您在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>築巢是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() ，則它將返回/orders而不是/app/users/1/orders 。這創建了一個不錯的隔離，並且可以更輕鬆地更改父途徑，而不必擔心應用程序的其餘部分會停止工作。但是，如果您需要導航到頂級頁面，則可以使用前綴~來參考絕對路徑：
< Route path = "/payments" nest >
< Route path = "/all" >
< Link to = "~/home" > Back to Home </ Link >
</ Route >
</ Route >注意： nest Prop不會改變傳遞到正則路徑的正則條件。取而代之的是， nest Prop僅確定嵌套路由是否將與其他路徑的其餘路徑匹配。要製作一個嚴格的路徑正則是/^[/](your pattern)[/]?$/ （這匹配可選的末端斜線和字符串的末端）。要製作可嵌套的正則表達式，請使用/^[/](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 prop傳遞時，將以布爾值指示該鏈接是否為當前路線處於活動狀態。您可以使用它來樣式的活動鏈接（例如，在導航菜單中的鏈接）
< 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 Hook：
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中的路線不必包裹在頂級組件中。內部路由器對象將按需構造，因此您可以開始編寫應用程序而不污染一系列頂級提供商。但是，在需要定制路由行為時。
這些情況包括基於哈希的路由，基本支持，自定義匹配器功能等。
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()掛鉤來使用該掛鉤。請參閱自定義位置掛鉤。
searchHook: () => [search: string, setSearch: fn] - 類似於hook ，但用於獲得當前的搜索字符串。
base: string - 允許指定基本路徑的可選設置，例如/app 。所有應用程序路由都將相對於該路徑。要導航到絕對路徑，請以~前綴為前綴。請參閱常見問題解答。
parser: (path: string, loose?: boolean) => { pattern, keys } - 模式解析功能。生成一個正格式，用於將當前位置與用戶定義的模式匹配，例如/app/users/:id 。與regexparam的parse函數具有相同的接口。請參閱此示例演示自定義解析器功能。
ssrPath: string和ssrSearch: string在服務器上呈現應用程序時使用這些。
hrefs: (href: boolean) => string - 轉換由Link呈現的<a />元素的href屬性的函數。它用於支持基於哈希的路由。默認情況下， href屬性與href或Link的to相同。位置掛鉤還可以定義hook.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"並且路徑名為"/app/users"時，返回的字符串為"/users" 。因此，呼叫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字符串，請提供使用自定義類的功能。請注意，它將始終執行確切的匹配（即/users /users/1 ）。
< Link className = { ( active ) => ( active ? "active" : "" ) } > Nav link </ Link >如果您需要控制其他道具，例如aria-current或style ，則可以編寫自己的<Link />包裝器，並通過使用useRoute Hook來檢測路徑是否處於活動狀態。
const [ isActive ] = useRoute ( props . href ) ;
return (
< Link { ... props } asChild >
< a style = { isActive ? { color : "red" } : { } } > { props . children } </ a >
</ Link >
) ;▶演示沙箱
如果尾隨斜杠對於您的應用程序的路由很重要，則可以指定自定義解析器。解析器是一種採用模式字符串並返回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 } ) ;這是內部使用的功能。
是的！儘管該項目不是用打字稿編寫的，但類型定義文件與軟件包捆綁在一起。
讓我們看一下如何使用framer-motion來使Wouter路線進行動畫。動畫輸入過渡很容易，但是退出過渡需要更多的工作。我們將使用AnimatePresence組件，該組件將將頁面保存在DOM中，直到出口動畫完成為止。
不幸的是， 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路由器的方式），但Wouter不會將其運送到框外。請參閱解決方案的問題。
可以通過名為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 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" ] ) ;
} ) ;我們有一些好消息給您！如果您是簡約的捆綁式游牧民族，並且需要在應用程序中使用該死的簡單路由，則只需使用Bare Location Hooks即可。例如， useBrowserLocation掛鉤，它僅為650字節，並手動與當前位置匹配：
import { useBrowserLocation } from "wouter/use-browser-location" ;
const UsersRoute = ( ) => {
const [ location ] = useBrowserLocation ( ) ;
if ( location !== "/users" ) return null ;
// render the route
} ;Wouter的座右銘是“極簡主義者” 。
Wouter插圖和徽標是由Katya Simacheva和Katya Vakulenko製作的。感謝@Jeetiss和所有出色的貢獻者幫助開發。
