[react]react-router-domの起動

こんにちは.
SPAアプリケーションを作成するときによく使うreact-router-domパッケージを見てみましょう.
create-react-appを使用して行います.

反応ルータ-Webおよびアプリケーション

反応-ルータ-dom-Web

反応-ルータ-ネイティブ-アプリケーション

3つのパッケージにはそれぞれ異なる用途があります.Web上でreact-router-domを使用します.
react-router-domの使い方はたくさんあります.
react-router-dom Reference参照
まず、npmはインストールを続行します.

npm i react-router-dom

完了後、アプリケーション.jsで、import文に次の内容を追加します.

import React ,{Component} from 'react';
import { BrowserRouter,Route, Link,Switch } from "react-router-dom";

インポートされたBrowserRouter、Route、Link、スイッチ

BrowserRouter-History APIは、URLとUIを同期させるためのルータである.

Route-構成部品プロパティで設定したURLが現在のパスと一致する場合、対応する構成部品、関数がレンダリングされます.

リンク:「a」タブと同様です.プロパティで設定したリンクに移動します.レコードは履歴スタックに保存されます.

スイッチ-サブ構成部品のルーティングまたは転送中に一致する最初の要素をレンダリングします.Switchは、BrowserRouterのみを使用する場合とは異なり、一致する要素が1つしかレンダリングされていないことを確認します.
オフの場合、一致するすべてのオブジェクトがレンダリングされます.

ネストされたルーティングは、内部構成部品上の別のルーティングポイントです.
これらの機能を使用してネストされたルーティングを作成します.

// App.js
import React ,{Component} from 'react';
import { BrowserRouter,Route, Link,Switch } from "react-router-dom";
import Rooms from './Rooms'            // 새로 만들 컴포넌트
class App extends Component {
  render() {
    return (
      <BrowserRouter>            // (1)
        <div style={{padding:20, border:'5px solid gray'}}>
          <Link to="/">홈</Link><br/>    //  (2)
          <Link to="/photo">사진</Link><br/>
          <Link to="rooms">방 소개</Link><br/>
          <Switch>                // (3)
            <Route exact path="/" component={Home}/>    (4)
            <Route path="/photo" component={Photo}/>
            <Route path="/rooms" component={Rooms}/>
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}
function Home({match}){
  return <h2>여기는 홈페이지입니다.</h2>
}
function Photo({match}) {
  return <h2>여기서 사진을 감상하세요.</h2>
}
export default App;

(1)レンダリング部分では、すべてのタグがブラウザに囲まれています.
(2)リンククリック時に移動するURLを指定する.
(3)Switchタグには、Route要素に一致するurlが表示されます.
ルーティングに冗長性がある場合は、スイッチに囲まれているため、最初の要素のみがレンダリングされます.
(4)Routeタグのpathはマッチング待ちのurlであり,マッチング後にcomponentがレンダリングされる.

ルーム紹介はまだルームコンポーネントを作成していません.
ホームページで、写真を正常にレンダリングします.
Rooms.jsファイルを作成します.
App.jsで、ルーム紹介ボタンをクリックしてルームコンポーネントに移動します.
urlは/roomになります.

import React from 'react'
import {Route,Link} from 'react-router-dom'

export default function Rooms ({match}) {
    return (
        <div>
            <h2>여기는 방을 소개하는 페이지입니다.</h2>
            <Link to={`${match.url}/blueRoom`}> 파란 방입니다. </Link><br/>
            <Link to={`${match.url}/greenRoom`}> 초록 방입니다. </Link><br/>
            <Route path={`${match.url}/:roomId`} component={Room}/>
            <Route exact path={match.url} render={()=><h3>방을 선택해주세요.</h3>}/>
        </div>
    )
}
function Room({match}) {        // 함수형에서 match 참조하기
    return <h2>{`${match.params.roomId} 방을 선택하셨습니다.`}</h2>
}

リンクを見るとテンプレートにmatchurlを表示できます.
matchには、パスを介して提供されるpropsが含まれます.

関数要素は{match}を介して自己変数から非構造化割当てを受信する.

クラスの構成部品では、this.props.matchとして参照します.

matchにはurlとその他の情報が含まれています.

match.paramsは動的urlです.上記のコードでは、Routeタグpath属性には${match.url}/:roomIdが含まれています.roomIdはparamsの一部です.
roomIdの場合、match.params.roomIdを参照してください.paramsにはキー/値ペアが存在します.

match.isExactは、URL全体に一致するかどうかを返すブール値です.

match.pathはキー値を含むurlです.(例えば/:roomId)

match.urlは値を含むurlです.(URLには/blueRoom、/greenRoomなどの値が含まれています)

異常ネストルーティングが作成されました.
ありがとうございます.