[React Router v6] 2. Path Segment

path에는 여러가지 segment가 있습니다.

• path가 없는 layout route
• : Dynamic Segment
• ? Optional Segment
• * Splat

Layout route

layout route는 내부 라우트의 레이아웃을 만들어 줍니다. 그래서 path가 없고 내부 라우트를 갖습니다.

기존에 만들었던 createBrowserRouter를 고쳐 보겠습니다.

 

index.js

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={
        <div>
            <h1>LayOut</h1>
            <Outlet />
        </div>}>
        <Route path="/" element={<App />} />
        <Route path="home" element={<Home />} />
        <Route path="blog" element={<Blog />} />
    </Route>
  )
);

element에 Outlet 컴포넌트를 사용해 내부 라우트의 element를 보여줍니다.

 

앞으로는 createBrowserRouter 대신 BrowserRouter를 사용하겠습니다.

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App></App>
  </BrowserRouter>
);

Dynamic Segment

url을 통해 정보를 전달하는 방법입니다. params로 전달된 정보에 접근할 수 있습니다.

제공되는 useParams 함수를 사용하면 아주 쉽게 사용할 수 있습니다.

 

App.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Blog from './Blog';
import Home from './Home';

const App = () => {
  return (
    <Routes>
      <Route path="home" element={<Home />}></Route>
      <Route path="blog/:postNum?" element={<Blog />}></Route>
    </Routes>
  );
};

export default App;

Blog.js

import React from 'react';
import { useParams } from 'react-router-dom';

const Blog = () => {
    const { postNum } = useParams();
    return (
        <div>
            <h1>BLOG</h1>
            <p>BLOG PAGE 입니다.</p>
            {postNum && <p>Post : {postNum}</p>}
        </div>

    );
};

export default Blog;

useParams결과 화면

Optional Segment

route segment를 옵션처럼 사용할 수있습니다.

사실 위 Dynamic segment에서도 :postNum? 사용했는데 해당 파라미터가 없어도 /blog 가능하도록 해줍니다.

즉 옵션처럼 /blog /blog/1 /blog/2 이렇게 모두 가능합니다.

공식 사이트에서 제공하는 예제는 lang을 옵션처럼 사용하고 있습니다.

 

Ex

<Route
  // this path will match URLs like
  // - /categories
  // - /en/categories
  // - /fr/categories
  path="/:lang?/categories"
  // the matching param might be available to the loader
  loader={({ params }) => {
    console.log(params["*"]); // "one/two"
  }}
  // and the action
  action={({ params }) => {}}
  element={<Categories />}
/>;

 

Splat

*는 하위 모든 url에 매치되도록 합니다. home을 home/*으로 만들어보겠습니다.

 

App.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Blog from './Blog';
import Home from './Home';

const App = () => {
  return (
    <Routes>
      <Route path="home/*" element={<Home />}></Route>
      <Route path="blog/:postNum?" element={<Blog />}></Route>
    </Routes>
  );
};

export default App;

기존에는 http://localhost:3000/home/24334 이런식으로하면 접속이 안되었지만 Splat을 사용한 뒤 접속이 됩니다.

http://localhost:3000/home/24334/45/23/65324 하위 url를 아무리 많이 만들어도 여전히 접속 됩니다.