wouter
Bugfixes
ショ和 これらのドキュメントは、Wouter V3専用です。ここで[email protected]のドキュメントをご覧ください
<Router />コンポーネントはありません。完全にオプションです。Route 、 Link 、 Switch 、 Redirectコンポーネントを提供することにより、ルーターのベストプラクティスを反応させます。useLocation 、 useRoute 、 useRouter 。 ...私はwouterが大好きです。それは小さく、フックを完全に包含しており、直感的で裸の骨APIを持っています。 WouterでReact-Routerを使用してできる限りのことを達成することができますが、不便ではなく、よりミニマリストに感じます。
Matt Miller 、 2020年の徹底的な反応エコシステム
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には、低レベルのスタンドアロンのロケーションフック、ルーティングのためのフックとパターンマッチングのフック、およびReact Routerのものと同様の従来のコンポーネントベースのAPIの3種類の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]+)[/]?$ / ) ; Pair paramsの2番目の項目は、一致していない場合、パラメーターまたは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のセッター方法は、ナビゲーションの更新がどのように発生するかを制御するためのパラメーターを備えたオプションオブジェクトを受け入れることもできます。
ブラウザの場所を使用する場合（デフォルト）、 useLocationフックは、新しい履歴エントリを追加する代わりに現在の履歴エントリを変更するためにフックを指示するために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は、usebrowserlocationを介してpushStateに反応し、 useBrowserLocation replaceState useLocationフックを使用します。
これをカスタマイズするには、アプリを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 } > / >正規表現経路でも同じです。キャプチャグループは、インデックスによってアクセスできます。または、代わりに使用できる名前のキャプチャグループがある場合は、アクセスできます。
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から始まるすべてのパスに対してアクティブになります。これは、アプリにベースパスを持つことと同等です。
2つ目は、動的パターンを使用して、 /app/user/1 、 /app/user/1/anythingパスを一致させます。
最後に、最小ルートは/app/users/1/ordersのように見えるパスに対してのみ機能します。そのルートにはnest小道具がなく、いつものように機能するため、試合は厳しくなります。
最後のルート内でuseLocation()を呼び出すと、 /app/users/1/ordersではなく、 /orders注文を返します。これにより、素敵な隔離が作成され、アプリの残りの部分が動作を停止することを心配することなく、親ルートに変更を加えることが簡単になります。ただし、トップレベルのページに移動する必要がある場合は、プレフィックス~を使用して絶対パスを参照できます。
< Route path = "/payments" nest >
< Route path = "/all" >
< Link to = "~/home" > Back to Home </ Link >
</ Route >
</ Route >注： nest小道具は、逆gesが正規表現経路に変化しません。代わりに、 nest Propは、ネストされたルートが残りのパスまたは同じパスと一致するかどうかのみを決定します。厳密なパスの正規表現を作成するには、 /^[/](your pattern)[/]?$/の正規表現パターンを使用します（これはオプションの終了スラッシュと文字列の終わりに一致します）。ネスト可能な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小道具が提供されない限り、常に子供を<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 />排他的なルーティングが必要な場合があります。ルートに重複するパターンがある場合でも、その時点で1つのルートのみがレンダリングされていることを確認することです。それが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 Hookを内部的に使用して、 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 Routerとは異なり、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フック関数です。現在のlocation文字列EG /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 and 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"であり、pathnameが"/app/users"である場合、返された文字列は"/users"です。したがって、 navigateの呼び出しは、あなたのためのパス引数のベースを自動的に追加します。
複数のネストされたルーターがある場合、ベースパスが継承され、積み重ねられます。
< Router base = "/app" >
< Router base = "/cms" >
< Route path = "/users" > Path is /app/cms/users! </ Route >
</ Router >
</ Router >アプリケーションルーティングの一般的なパターンの1つは、他のルートが一致しない場合に備えて、フォールバックとして表示されるデフォルトルートを持つことです（たとえば、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関数の署名を使用します。
Strict Routesオプションをサポートする一般的な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 Presentを備えたルートは、ネスティングコンテキストを作成します。ネストされたルート内の位置はスコープされることに注意してください。
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で書かれていませんが、タイプ定義ファイルはパッケージにバンドルされています。
Wouter Routesをframer-motionでアニメーション化する方法を見てみましょう。アニメーションのENTER Transitionsは簡単ですが、終了トランジションにはもう少し作業が必要です。出口アニメーションが完了するまでページを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はすぐに発送しません。回避策については、この問題を参照してください。
事前エクスポートはwouter-preactという名前の個別のパッケージ（またはwouter/preact namespace内で利用できますが、この方法はピア依存関係として反応する必要があるため推奨されません）：
- 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" ] ) ;
} ) ;私たちはあなたのためにいくつかの素晴らしいニュースを持っています！あなたがミニマリストのバンドルサイズの遊牧民であり、アプリで非常に簡単なルーティングが必要な場合は、裸のロケーションフックを使用できます。たとえば、 useBrowserLocationフックは650バイトしかgzで、現在の場所を手動で一致させます。
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と素晴らしい貢献者に感謝します。
