[React] 중첩라우팅

첫번째 방법

Router.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Chart from "./Chart";
import Coin from "./Coin";
import Coins from "./Coins";
import Price from "./Price";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Coins />} />
        <Route path="/:coinId" element={<Coin />}>
          <Route path="chart" element={<Chart />} />
          <Route path="price" element={<Price />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

Coin.tsx

import axios from "axios";
import {
  Route,
  Routes,
  useLocation,
  useParams,
  Outlet,
} from "react-router-dom";
import { useEffect, useState } from "react";
import styled from "styled-components";
import Chart from "./Chart";
import Price from "./Price";


function Coin() {

  return (
    <Container>
      
        <>
          
          {/* 중첩라우팅 */}
          <Outlet />
        </>
      )}
    </Container>
  );
}

export default Coin;

두번째 방법

Router.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Chart from "./Chart";
import Coin from "./Coin";
import Coins from "./Coins";
import Price from "./Price";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/:coinId/*" element={<Coin />} />
        <Route path="/" element={<Coins />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

Coin.tsx

import axios from "axios";
import {
  Route,
  Routes,
  useLocation,
  useParams,
  Outlet,
} from "react-router-dom";
import { useEffect, useState } from "react";
import styled from "styled-components";
import Chart from "./Chart";
import Price from "./Price";


function Coin() {

  return (
    <Container>
      
        <>
          
          {/* 중첩라우팅 */}
          <Routes>
            <Route path="chart" element={<Chart />} />
            <Route path="price" element={<Price />} />
          </Routes>
         
        </>
      )}
    </Container>
  );
}

export default Coin;