Gatsbyでは、プログラムでルートをどのように制限しますか?を使用して反応ルータ、
<Redirect>
を実行することは可能です
<Route>
と
、しかしこれはGatsbyでどのように実装されますか?このようなことをするには...
<Route exact path="/" render={() => (
loggedIn ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
このファイルをGatsbyのどこに配置しますか?
src/pages
に入れますかまたは他の場所?
編集し、追加の説明を求めています...
@NenuとGatsbyのドキュメントからのアドバイスに従って、この作業を行うことができます。ドキュメントは非同期ではない例を示したため、このようなリモートサーバーと対話するために調整する必要がありました...
async handleSubmit(event) {
event.preventDefault()
await handleLogin(this.state)
.then(response => _this.setState({isLoggedIn: isLoggedIn()}))
.catch(err => { console.log(err) });
}
また、私は
<PrivateRoute />
を使用することができますこれとともに。
残念ながら、使用してレンダリングすると...
render() {
if (isLoggedIn()) {
return <Redirect to={{ pathname: `/app/profile` }} />
}
return (
<View title="Log In">
<Form
handleUpdate={e => this.handleUpdate(e)}
handleSubmit={e => this.handleSubmit(e)}
/>
</View>
)
}
...確かに
<Redirect to={{ pathname:
をしている間
/ app/profile
}} />
、リダイレクトの1秒前にフォームフィールドが空になり、その後のみ
/app/profile
にリダイレクトされることに気付きました(
/app/login
から
)。また、間違ったパスワードを入力すると、フォーム全体が再レンダリングされます(
<View />
を再レンダリングします)再び)。彼らはすべての情報を最初から再入力する必要があるため、これは悪いユーザー体験になります。また、無効な入力などのスタイルを追加することはできません。より良い方法があるかどうか疑問に思いますギャツビーでこれを行うには。
または、Gatsbyのより高い抽象化レベルに依存するのではなく、フォーム機能をゼロからより多く構築する必要がありますか(つまり、Redux、ルーターなどをより直接使用する)?
- エラー:App(…):レンダリングから何も返されませんでした。これは通常、returnステートメントが欠落していることを意味します
- 特定のブールフィールドでtrueに一致するコンテンツフル投稿に一致する変数を宣言しようとしています
- ルーターを使用して、あるコンポーネントから別のReactJSに渡されたデータにアクセスする方法
- Reactルーターを使用してReactの子コンポーネントではなくアプリコンポーネントにのみリンクを表示するにはどうすればよいですか?
- locationstateがgatsbyビルドで失敗する
- IDの代わりに名前を使用してルーティングを反応させる
- Reactルート:コンポーネントから現在のルートキーを取得する方法
- React Hookは、React関数コンポーネントでもカスタムReactHook関数でもない関数で呼び出されます
- react-routerを使用してロードできないルート
- ユーザーが認証されていないときに点滅するプライベートルートに反応する
ギャツビーは反応ルータ そのため、内部でクライアント専用ルートを定義できます。
いつものように、gatsbyの場合、githubリポジトリには非常に良い例があります。
https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth
そして、それに関するドキュメント:
https://www.gatsbyjs.org/docs/building-apps-with-gatsby/#client-only-routes--user-authentication
要約すると、これが行われます:
1)PrivateRoute
を作成する のコンポーネント/ src/components 2)必要なプレフィックス「クライアント専用」パスでルートを定義しますのアクセスを制限したいとします/ app /:path あなたのウェブサイトのセクション、そして/src/pages/app.js:
3)クライアントルートをホワイトリストに登録するgatsby-node.js