Gatsbyでプログラムでルートを制限する

bugfix> reactjs > 投稿

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、ルーターなどをより直接使用する）？

reactjs

react-router

gatsby

回答 1 件

  • ギャツビーは反応ルータ そのため、内部でクライアント専用ルートを定義できます。

    いつものように、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 
    const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      !isLoggedIn() ? (
        // If we’re not logged in, redirect to the login page.
        <Redirect to={{ pathname: `/app/login` }} />
      ) : (
        <Component {...props} />
      )
    }
  />
);
    2）必要なプレフィックス「クライアント専用」パスでルートを定義します

    のアクセスを制限したいとします/ app /：path あなたのウェブサイトのセクション、そして/src/pages/app.js：

    const App = () => (
  <div>
    <PrivateRoute path="/app/profile" component={Home} />
    <PrivateRoute path="/app/details" component={Details} />
    <Route path="/app/login" component={Login} />
  </div>
);

    These routes will exist on the client only and will not correspond to index.html files in an app’s built assets. If you wish people to visit client routes directly, you’ll need to setup your server to handle these correctly. (source)

    3）クライアントルートをホワイトリストに登録するgatsby-node.js 
    exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = `/app/:path`
    // Update the page.
    createPage(page)
  }
}

あなたの答え

関連記事