React-routerメモ

React-routerのメモ

1　インストール

• npm install --save react-router-dom

2 コンポーネント作成

import React from "react";
import ReactDOM from "react-dom";
//pagesディレクトリを作ってhome,aboutを作成する
import Home from "./pages/home";
import About from "./pages/about";
import {BroweserRouter, Switch, Route} from 'react-router-dom'
import "./styles.css";

function App() {
  return (
    <div className="App">
　　　　　　　　　　//作ったコンポーネントを呼び出す
      <Home />
      <About />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

3 コンポーネントのルート先を設定

• react-router-domを使う

import React from "react";
import ReactDOM from "react-dom";
import Home from "./pages/home";
import About from "./pages/about";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path="/" component={Home} exact />
         //urlで/aboutにするとこちらのコンポーネントが表示される
          <Route path="/about" component={About} exact />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

4 Linkを使う

import React from "react";

const Header = props => {
  return (
    <nav>
      //通常のhtml風だとここがaタグになるが、これだと画面遷移をしても更新されてしまう
　　　　　　　　　　　//そこでaタグではなくLinkというものを使う
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  );
};

export default Header;

//↓置き換えるとこう

import React from "react";
import {Link} from 'react-router-dom'
const Header = props => {
  return (
    <nav>
      //Linkを使って上のaタグをこのように変える
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
};

export default Header;

補足　アクティブリンクをつけたい場合

import React from "react";
//NavLinkに変更して使うことで見ているページにactiveを付与できる
import { NavLink } from "react-router-dom";
const Header = props => {
  return (
    <nav>
      <NavLink to="/" exact>
        Home
      </NavLink>
      <NavLink to="/about" exact>
        About
      </NavLink>
    </nav>
  );
};

export default Header;

nav a.active {
  color: red;
}

とかにしてあげるとこれでアクティブのスタイルを変更できたりする

メモまとめ

繰り返しやることでやはり定着されるものだと感じつつ、他のもの触ったりしてたらちょっと忘れてたりするので
ドキュメントチェックはかかせないですなぁぁ