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和所有出色的贡献者帮助开发。
