TIL32.React Router

1つのページに複数のページを表示する「routing」機能について説明します.

ルーティングとは

ルーティングは簡単に言えば、1つのページ内に異なる経路によって異なる画面が表示されます.残念なことに、反応ライブラリ自体にはこれらの機能が内蔵されていないため、「サードパーティライブラリ」(メーカーが作成したものではなく、他のメーカーが作成した対応するツールサポートライブラリ)react-routerが必要です.

react-routerのインストール

npm install react-router-dom --save

routerを使用するにはreact-router-domが必要です.react-router-routerをインストールするだけで、従属はreact-router-domをインストールできます.この場合、プロジェクトファイルにインストールする必要があります.

routes component

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
		  <Route exact path="/signup" component={Signup} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

react-router-domのRouter(ブラウザの名前が長いのでas Routerと名付けられています).swith、Route構成部品をインポートします.Router component:ルーティングを担当する役割.Switch component:AパスはA画面を表示し、BパスはB画面を表示する役割を果たす.Route component:ルーティングコンポーネントは、基本的に「path」と「component」の2つの支柱を含む.
パスについてはexactを書かなければ"/"はパスで共通であるため,必要な機能画面および"/"に含まれる画面が現れる.

ReactDOM.render(<Routes></Routes>, document.getElementById('root'));

最終的な目標は、私たちが入れた要素をホームページで見ることです.前のプロセスでルーティング構成部品を作成するには、私たちが実装するすべての構成部品をルーティング構成部品に簡単に含めるだけで、トップレベルの構成部品が作成されます.最終ターゲットのために、ファイルの最上位レベルの「index」にルーティングを配置します.htmlに接続する「id root」が必要です.

ルートへの移動方法

1.Link component

import React from 'react';
import { Link } from 'react-router-dom';
class Login extends React.Component {
render() {
return (

  <div>
    <Link to="/signup">회원가입</Link>
  </div>
)

}
}
export default Login;
ルータは任意にパスを作成してページとして作成したいものを処理することができます.仮想ページアドレスなので、ユーザーがアドレスに接続したときにエラーが発生します.仮想アドレスに移動するには、アンカーラベルが必要です.linkはこの役割を果たします.
*aラベルとlinkラベル
-通常、aタグを使用するとエラーが発生します.前述したように、反応ルータに実際のページが存在しないため、ブラウザが提供するaタグはルータによって認識されません.したがって,反応ルータが提供するリンクタグを用いる.
-外部サイト<a>に移動し、プロジェクト内でページ<link>を切り替える

2.withRouter HOC

linkが単純な移動に使用される場合、「withRouter HOC」は他の論理が処理される必要がある場合に使用されます.

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

  goToSignup() {
    this.props.history.push('/signup');
  }

  render() {
    return (
      <div>
        <div
          class="btn signup-btn"
          onClick={this.goToSignup.bind(this)}
        >
          회원가입
        </div>
      </div>
    )
  }
}

export default withRouter(Login);

propsでルート情報(history)を取得するには、エクスポートされたクラスでwithRouterを使用してカプセル化する必要があります.これをHOCと略す.

scss

これは、cssを効率的に記述するのに役立つアップグレード表現と考えられます.

scssの利点

コードの重複を減らします.

変数を使用できるため、メンテナンスが容易です.

$theme-color: #FAFAFA;
$border-style: solid;

.login-container {
	color: $theme-color;
    style: $border-style;
}

a {
	color: red;
    &:hover {
    	border-bottom: $border-style 1px;
    }
}

-関数と演算子を使用できます.

@mixin flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}

login-container {
  @include flex-center;
	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;
		&:hover {
			background-color: red;
			cursor: pointer;
		}

}