[React] 리액트 중첩 라우팅 하기 (BrowserRouter)

Q. localhost:3000/auth/login 해당 url처럼 auth뒤에 login으로 가게 해주세요.

 

Angular에서는 중첩라우팅을하고싶으면 RouterModule.forRoot에 걸린 컴포넌트에서 RouterModule.forChild를 하면

중첩 라우팅이 가능한데 리액트에서는 어떻게 하는지 궁금해서 찾아보았다.

 

리액트는 최상단 파일에서 BrowserRouter로 컴포넌트들을 감싸고 중첩라우팅을 할 주소 뒤에 *를 붙여서

해당 주소로 시작하면 무조건적으로 원하는 컴포넌트로 접속이 될수있도록 라우팅을 시켜버리는것같다.

여기서 주의할점은 BrowserRouter는 최상단 파일에서 한번만 사용하고 자식 파일들은 Routes만 사용해야한다는점이다.

 

바로 코드로 확인해보자.

먼저 최상단 파일에서 라우팅을 하고싶은 url을 지정해준다.

// App.js 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import React from "react";
import Main from "./components/main/Main";
import Auth from "./pages/auth/Auth";

function App() {
  return (
    <div className="App">
    // 최상단 폴더에서 BrowserRouter로 묶어줌
      <BrowserRouter>
        <Routes>
        //auth로 시작하는 주소는 무조건 Auth 컴포넌트로 이동
          <Route path="/auth/*" element={<Auth />}></Route>
          <Route path="/" element={<Main />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

 

그다음 자식 컴포넌트에서 원하는 url을 지정해준다.

//Auth.js

import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";
import Login from "../../components/auth/Login";
import Regist from "../../components/auth/Regist";

export default class Auth extends Component {
  render() {
    return (
    //BrowserRouter는 사용하지않는다.
      <Routes>
        <Route path="login" element={<Login />}></Route>
        <Route path="regist" element={<Regist />}></Route>
      </Routes>
    );
  }
}

 

이렇게 하면 중첩라우팅을 할수있다.