[RandomUserApplicationNINJA]タイトルプッシュ設定とログインページ(4)

22344 ワード
RandomUserApplication テキストリンク

完成品




学識

  • history
    • 次のようになります.
    const App = () => {
  return (
    <AppWrapper>
      <Helmet
        titleTemplate="랜덤 유저 어플리케이션"
        defaultTitle="랜덤 유저 어플리케이션"
      >
        <meta name="description" content="랜덤 유저 어플리케이션" />
      </Helmet>
      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route exact path="/users" component={ExploreUsersPage} />
        <Route path="/users/:id" component={UserDetailPage} />
      </Switch>
      <GlobalStyle></GlobalStyle>
    </AppWrapper>
  );
};
    Routeと宣言されたパスにルーティングされる.

    パラメータprops.historyとします.
    history.Push:Routeは、デフォルトの一致、履歴、および位置を構成部品に渡します.この時の歴史.push("/パラメータ")関数にパラメータを追加すると、URLを更新せずに移動します.
    useEffect(() => {
    console.log(history);
    const unblock = history.block('정말 떠나실건가요?');
    return () => {
      /// 실행되는 라인
      unblock();
    };
  }, [history]);
  • Link
    リンク:aラベルと同じです.しかし、SPAの特性上、aラベルのようにリフレッシュすることはできないため、aラベルに基づいて、機能的な改良によって他のビューをリフレッシュせずにレンダリングする.
    •  <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필 목록</Link>
        </li>
        <li>
          <Link to="/history">예제</Link>
        </li>
  • HOC(高次素子)react router domでよく使用される高次成分withRouterを理解します.
    • import React from 'react';
import { withRouter } from 'react-router-dom';
const WithRouterSample = ({ location, match, history }) => {
  return (
    <div>
      <h4>location</h4>
      <textarea value={JSON.stringify(location, null, 2)} readOnly />
      <h4>match</h4>
      <textarea value={JSON.stringify(match, null, 2)} readOnly />
      <button onClick={() => history.push('/')}>홈으로</button>
    </div>
  );
};

export default withRouter(WithRouterSample);
    親ページ上でレンダリングを行う場合、親ページルーティング時のlocation、matchおよびhistoryを取得できます.
  • useHistory 
    •  that you may use to navigate.import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
  • useLocation 
    • import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageViews() {
  let location = useLocation();
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
  }, [location]);
}

function App() {
  usePageViews();
  return <Switch>...</Switch>;
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);
  • useParams 
    •  Use it to access match.params of the current <Route>.import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

    Reference

  • react history push
  • react-router-dom hooks
  • a新しいウィンドウをマークする
  • react router dom
  • react router dom document
  • HoC
    • div+cssはどのように1つの小さいdivを別の大きいdivの中で垂直に水平に中央に置くことができます
    Webページの右下にあるポップアップフォームの実装コード