Reactでネストされたページ遷移について学ぶ

学んだこと

• Page1.jsx
  • Page1DetailA,Page1DetailB のリンクを用意する

export const Page1 = () => {
  return (
    <div>
      <h1>Page1ページです。</h1>
      <Link to="/page1/detailA">DatailA</Link>
      <br />
      <Link to="/page1/detailB">DatailB</Link>
    </div>
  );
};

• App.jsx
  • Page1 内のリンクから Page1DetailA、Page1DetailB に遷移したい。
    • render を使うことで、ネストして Page1DetailA、Page1DetailB を表示することができる。
    • props の match 内の url には/page1が入るため、url を利用し、${url}/表示したいパスで遷移したい先のパスを指定することが可能。
    • 一々page1/表示したいパスなど書かずとも url を使うことで、パスを間違えずに済む。

import { BrowserRouter, Link, Switch, Route } from 'react-router-dom';

import './App.css';
import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';
import { Page1DetailA } from './Page1DetailA';
import { Page1DetailB } from './Page1DetailB';

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/"> Home </Link>
        <br />
        <Link to="/page1">Page1</Link>
        <br />
        <Link to="/page2">Page2</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route
          path="/page1"
          render={({ match: { url } }) => (
            <Switch>
              {console.log(url)}
              <Route exact path={url}>
                <Page1 />
              </Route>
              <Route exact path={`${url}/detailA`}>
                <Page1DetailA />
              </Route>
              <Route exact path={`${url}/detailB`}>
                <Page1DetailB />
              </Route>
            </Switch>
          )}
        ></Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

• Page1DetailA.jsx

export const Page1DetailA = () => {
  return (
    <div>
      <h1>Page1DetailAページです。</h1>
    </div>
  );
};

• Page1DetailB.jsx

export const Page1DetailB = () => {
  return (
    <div>
      <h1>Page1DetailBページです。</h1>
    </div>
  );
};