React Routerを使用してステータス遷移をクリア

Reactを使用すると、ページ間でデータ交換が必要な場合があります.そのたびに忘れてしまいますが、以前書いたコードで検索して、ブログで整理してアップロードする必要があるような気がします.

ルーティング

プリファレンス

//App.js
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import MainPage from '../src/pages/main';
import Page1 from '../src/pages/page1';
import Page2 from '../src/pages/page2';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" render={() => <MainPage />} />
          <Route exact path="/page1" render={() => <Page1 />} />
          <Route exact path="/page2" render={() => <Page2 />} />
        </Switch>
      </div>
    );
  }
}

export default App;

リンクNavLinkコンポーネント

を使用

//MainPage.js
import React from 'react';
import { Link, NavLink } from 'react-router-dom';

function MainPage() {
  const activeStyle = {
    '스타일 설정'
  };
  
  return (
    <div>
      <button>
        <Link to="/page1">
          Page1
        </Link>
      </button>
      <button>
        <NavLink exact to="/page2" activeStyle={activeStyle}>
          Page2
        </NavLink>
      </button>
    </div>
  );
}

export default MainPage;

リンクとNavLinkの違いURLの有効化時にスタイルを適用するかどうか

withRouter HoC,

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

function Page1() {
  return(
    <button onClick={() => 
      this.props.history.push({
        pathname : "/",
      })
    }>
      Main Page로 이동
    </button>
  );
}

export default withRouter(Page1)

historyオブジェクトのpushメソッドを使用して移動します.

じょうたいでんそう

クラスコンポーネント

//state를 보내는 Component
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class GiveComponent extends Component {
  return(
    <button onClick={() => 
      this.props.history.push({
        pathname : "보낼 페이지 주소", 
        state : { 
          data : 'This is data'
        },
      })
    }>
      전송
    </button>
  );
}

export default withRouter(GiveComponent);

//state를 받는 Component
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class TakeComponent extends Component {
  const data = this.props.location.state.data;

  return(
    <p>{data}</p>
  );
}

export default withRouter(TakeComponent);

Functional Component

//state를 보내는 Component
import React from 'react';
import { useHistory } from 'react-router-dom';

function GiveComponent() {
  const history = useHistory();
  return(
    <button onClick={() => 
      history.push({
        pathname : "보낼 페이지 주소", 
        state : { 
          data : 'This is data'
        },
      })
    }>
      전송
    </button>
  );
}

export default GiveComponent;

//state를 받는 Component
import React from 'react';
import { useLocation } from 'react-router-dom';

function TakeComponent() {
  const data = useLocation().state.data;

  return(
    <p>{data}</p>
  );
}

export default TakeComponent;

クラスコンポーネントはwithRouterHoc、関数コンポーネントはwithRouterを使用できますが、useHistory、useLocation hookを使用してstateを送信できます.