TIL 29 | React Router

10260 ワード
React TIL テキストリンク

ルーティングとは?


urlアドレスによって異なるviewが表示されます.react-routerにはこれらの機能が内蔵されていないため、最も人気のある三方ライブラリreact-routerを使用します.

Route Component


npmまたは糸を用いて反応経路後のindexを設定する.Routesはjsと同じ位置にあります.jsファイルを生成します.
//Route.js

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

import Login from './pages/Login/Login';
import List from './pages/List/List';
import Detail from './pages/Detail/Detail';

class Routes extends React.Component {
  render() {
		return (
	    <Router> // or <BrouserRouter>
	      <Switch>
			<Route exact path="/" component={Login}/>
	        <Route exact path="/list" component={List} />
	        <Route exact path="/detail" component={Detail} />
	      </Switch>
	    </Router>
	  )
	}
}

export default Routes;
//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import "./styles/reset.scss";

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

ルーティングの移動方法


<Link>構成部品の使用

  • DOMから<a>に変換されます.ただし,外部サイトに移動するaタグとは異なり,リンクはプロジェクト内でページを切り替えることができる.
  • クリックで
    • を実現
    //Login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Login.scss';

class Login extends Component {
	render() {
    	return(
        	<>
            </>
        )
   	}
}

export default Login;

    withRouterHOC(プレミアムコンポーネント)の使用

  • onClickなどのアクティビティ
    • を使用
  • this.props.アクセスhistory(ルーティング情報)
  • 他の論理は
    • である.
    import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends Component {

  goToListPage = () => {
    this.props.history.push('/list');
  }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToListPage}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login); //주의
    YahooファイナンスAPIとPythonで簡単なデータ摂取チュートリアル
    [SWEA] #1208 Flatten