react-router-dom

routeを使用可能にする

react-router-domの使用

yarn add react-router-dom命令実行

index.jsファイルにBrowser素子でApp素子を包む

App.jsAPPで導入したルータ、スイッチなどのコンポーネント

サンプルコード1

index.js

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

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  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();

既存のnpx create-react-appの部分に、BrowserRouterの部分を追加してアプリケーションを囲みます.

App.js

import { Route, Switch } from "react-router";
import About from "./pages/About";
import Profile from "./pages/Profile";

export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/">
          <h1>HOme</h1>
        </Route>
      </Switch>
    </div>
  );
}

RouteとSwitchを使用してこの部分をパッケージ処理します.

該当する根元部分は以下の通り.

サンプルコード2

インデックスはサンプルコード1とは異なります.jsを変更せずに既存のAppからjsのみ変更します.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  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();

<BrowserRouter>部分的な欠落が見られる.

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import About from "./pages/About";
import Profile from "./pages/Profile";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About></About>
        </Route>
        <Route path="/profile">
          <Profile></Profile>
        </Route>
      </Switch>
    </Router>
  );
}

逆に、このセクションの名前を「Router」とします.jsでバンドルして使用します.

Context-アプリケーションAPI

必要なファイル

store/users.js

pages/About.js

pages/Profile.js

App.js

1. store/users.js

import { createContext } from "react";

export const UserContext = createContext();

const UserStore = (props) => {
  const users = {
    name: "khw",
    job: "college student",
  };
  return (
    <UserContext.Provider value={users}>{props.children}</UserContext.Provider>
  );
};

export default UserStore;

Contextは、createContextを使用してUserContextとして指定します.
UserStoreセクションには、Providerによってコールバックコンポーネントとして処理されるuserという必要な値があります.

2. pages/About.js

import React,{useContext} from 'react'
import { UserContext } from '../store/users'

export default function About() {
  const context = useContext(UserContext)
  console.log(context)
  
  return (
    <div>
      <h3>{context.name}</h3>
    </div>
  )
}

useContext輸入されたUserContext一部の文脈が利用可能であり、この部分はcontext.속성값を用いて扱うことができる.

3. pages/Profile.js

import React, { useContext } from "react";
import { UserContext } from "../store/users";
export default function Profile() {
  const context = useContext(UserContext);
  console.log(context);

  return (
    <div>
      <h3>{context.job}</h3>
    </div>
  );
}

2.番号と同様にjob属性を使用します.

4. App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import About from "./pages/About";
import Profile from "./pages/Profile";
import UserStore from "./store/users";

export default function App() {
  return (
    <UserStore>
      <Router>
        <Switch>
          <Route path="/about">
            <About></About>
          </Route>
          <Route path="/profile">
            <Profile></Profile>
          </Route>
        </Switch>
      </Router>
    </UserStore>
  );
}

ユーザー・ストレージ全体を組み合わせて、プロバイダを使用可能にします.

結果

urlによっては、propsを使用せずに必要なデータが移動される場合があります.