[React]Routing

スパって何?
マルチページアプリケーション(MPA)とは異なり、複数のページを使用し、クライアントは新しいページが必要になるたびに静的リソースをダウンロードし、ページ全体を再表示します.最初にすべての静的リソースをダウンロードした後、クライアントの新しいページ要求に対して、ページ更新に必要なデータのみを受信してページ更新を行う形式を指す.
SPAをCSRでレンダリングし、MRAをSSRでレンダリングします.
初期駆動速度は遅く,検索エンジン最適化の観点から不利であるが,開発は容易であり,可用性の面で有利である.
ルーティングとは?
SPAはHTMLが1つしかありませんが、SPAはアドレスウィンドウに従って他のページを表示することもできます.このようにブラウザアドレスに応じて異なるページを表示することをルーティングと呼ぶ.
最も多く使用されているのはreact-route-domライブラリです.

yarn add react-router-dom

react-route-dom公式ドキュメント
ルーティングの使用
index.BrowserRouterをjsに適用
BrowserRouterの適用

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// <APP /> 을 감싸고있는 <React.StrictMode>를 <BrowserRouter>로 바꾸어준다.
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.jsでは、アプリケーションをパッケージしたブラウザがブラウザが所有するアドレスに関する情報をpropsに渡すことができる.
つまり、私が今何を見ているのかを簡単に知ることができます.
App.jsにRouteを適用する

経路使用方法1:支柱なし交付時

<Route path="/주소" component={[보여줄 컴포넌트]}/>

Route使用方法2:支柱がある場合

<Route path="/주소" render={(props) => (<BucketList list={this.state.list} />)} />

例

import React from 'react';
import logo from './logo.svg';
import './App.css';

// Route
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={};
  }
             
  render(){
    return (
      <div className="App">
        <Route path="/" component={Home} />
      	<Route path="/cat" component={Cat} />
     	 <Route path="/dog" component={Dog} />
      </div>
    );
  }
}
export default App;

正確な適用
「/」という記号も「/cat」と「/dog」に含まれており、catとdogからホームページへのページも一緒にレンダリングされます.
次のようにexact/を追加すると、ページは同時にレンダリングされません.

import React from 'react';
import logo from './logo.svg';
import './App.css';

// Route
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={};
  }
             
  render(){
    return (
      <div className="App">
        // exact 사용
        <Route path="/" exact component={Home} />
      	<Route path="/cat" component={Cat} />
     	 <Route path="/dog" component={Dog} />
      </div>
    );
  }
}
export default App;

URLパラメータの使用
パラメータ:/cat/nabi
クエリー:/cat?name=nabi
パラメータ指定メソッド
App.js

//App.js
...
// 파라미터 주기
<Route path="/cat/:cat_name" component={Cat}/>
...

Cat.js

//Cat.js
import React from "react";

const Cat = (props) => {

    console.log(props.match);

    return (
        <div>파라미터로 받은 고양이 이름 : {props.match.params.cat_name}</div>
    )
}

export default Cat;

リンクの移動
使用
リンクコンポーネントはhtmlのaタグと同様に、応答領域内でのページ切り替えを支援します.

import React from 'react';
import logo from './logo.svg';
import './App.css';
// Route, Link 컴포넌트
import { Route, Link } from "react-router-dom";

import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {

  constructor(props){
    super(props);
    this.state={};
  }
  
  render(){
    return (
      <div className="App">
        <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>

        <hr />
        
        <Route path="/" exact component={Home} />
        <Route path="/cat" component={Cat} />
        <Route path="/dog" component={Dog} />
      </div>
    );
  }
}

export default App;

使用履歴
リンクコンポーネントをクリックするのではなく、より多くの関数を使用してページを切り替えます.
withRouter設定
→historyオブジェクトをpropsとして受信するには、withRouterを設定する必要があります.

...
import { withRouter } from "react-router";
...
// ! 내보내는 부분에서 withRouter로 감싸준다.
export default withRouter(App);

例

import React from 'react';
import logo from './logo.svg';
import './App.css';
// withRouter 불러오기
import { withRouter } from "react-router";

import { Route, Link } from "react-router-dom";

import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
  
  constructor(props){
    super(props);
    this.state={};
  }

  componentDidMount(){
    console.log(this.props);
  }

  render(){
    return (
      <div className="App">
        <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>

        <hr />

        <Route path="/" exact component={Home} />
        <Route path="/cat" component={Cat} />
        <Route path="/dog" component={Dog} />
        
        <button onClick={() => {
          // props에 있는 history 사용
          // push([이동할 주소])는 페이지를 이동시켜 준다.
          this.props.history.push('/cat');
        }}>
          /cat으로 가기
        </button>
        <button onClick={()=>{
          // goBack() 뒤로가기
          this.props.history.goBack();
        }}>뒤로가기
        </button>
      </div>
    );
  }
}
// ! 내보내는 부분에서 withRouter로 감싸준다.
export default withRouter(App);