Reactルータ

Reactのルーターについての基本！！

基本形

import React from "react";
import { Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/users">Users</Link>
    </div>
  );
}

コンポーネント

全てreact-router-domからimportする必要がある

1. routers

<BrowserRouter>: 通常のURLパスを使用
<HashRouter>: URLにhashを含むパスを使用（e.g. http://example.com/#/your/page）

2. Route Matchers

<Switch>の中で<Route>を使う。現在のページが<Route>に記載されているページと同じならページ遷移しない。

ポイント
途中まで同じURLの時はより詳細の方を先に書く
Route exact path=を使えば書く順番は問わない。

<Route path="/contact/:id">
  <Contact />
</Route>
<Route path="/contact">
  <AllContacts />
</Route>

3. Navigation

<NavLink>: パスが変わらなくても押せばアクティブになる

Scroll

<ScrollToTop>TOPにスクロール

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}