リーチルーターチュートリアル

ReactアプリでReachRouterを使用するためのクイックスタート

前回のプロジェクトで使用しましたルーターに到達するReactアプリでルーティングを行う最も簡単な方法だと思います。

私はそれがはるかに簡単だと思いますReactルーター、これは私が過去に使用した別のルーターです。

これは、その基本を理解するための5分間のチュートリアルです。

インストール

まず、を使用してインストールします

npm install @reach/router

の場合@構文は初めてです。スコープ付きパッケージを許可するnpm機能です。つまり、名前空間。

次に、それをプロジェクトにインポートします。

import { Router } from '@reach/router'

基本的な使い方

トップレベルのReactファイルで使用していますが、index.jscreate-react-appインストール、表示したいすべてのコンポーネントをラップします。

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

ザ・pathコンポーネントに追加する属性を使用すると、コンポーネントのパスを設定できます。

つまり、ブラウザのURLバーにそのパスを入力すると、ReachRouterはその特定のコンポーネントを表示します。

ザ・/パスはインデックスルートであり、アプリドメインの横にURL /パスを設定しない場合に表示されます。言い換えれば、「ホームページ」です。

デフォルトルート

ユーザーがどのルートとも一致しないURLにアクセスすると、デフォルトでReachRouterはにリダイレクトします。/ルート。あなたは追加することができますdefaultこのケースを処理し、代わりに素敵な「404」メッセージを表示するためのルート:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

プログラムでルートを変更する

使用navigateアプリ内のルートをプログラムで変更する機能:

import { navigate } from '@reach/router'
navigate('/private-area')

使用LinkJSXを使用してルートにリンクするコンポーネント:

import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

URLパラメータ

を使用してパラメータを追加します:param構文:

<Router>
  <User path="users/:userId" />
</Router>

これで、この架空のユーザーコンポーネントで、userId小道具として:

const User = ({ userId }) => (
  <p>User {userId}</p>
)

ネストされたルート

トップレベルのReactファイルでこのようにルートを定義する方法を示しました。

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

ネストされたルートを定義できます。

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

だから今あなたはあなたを持つことができます/private-area/23232リンクポイントをユーザーコンポーネントに渡し、userId 23232

コンポーネントがその内部に独自のルートを定義できるようにすることもできます。あなたは/*ルート後のワイルドカード:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

次に、コンポーネント内でルーターを再度インポートし、独自のサブルートのセットを定義できます。

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

を使用する任意のルート/private-area/somethingユーザーコンポーネントによって処理され、ルートの後の部分はそのとして送信されますuserId小道具。

に何かを表示するには/private-area今すぐルートを追加する必要があります/のハンドラーPrivateArea成分:

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: