React Router v4로 사이드바 또는 이동 경로 렌더링하기

React Router로 앱을 빌드할 때 종종 사이드바 또는 이동 경로 탐색 모음을 구현하고 싶을 것입니다. 이 게시물에서는 React Router 문서에서 Sidebar 예제를 분해하여 React Router로 수행하는 방법을 배웁니다.



일반적인 UI 패턴은 앱에 사이드바 또는 이동 경로 탐색 모음을 사용하는 것입니다. React Router를 사용하면 페이지당 하나Route 이상을 렌더링하고 일치시킬 수 있으므로 이 패턴을 구현하는 것은 매우 간단합니다. 이 게시물의 목표는 여러 Route 를 렌더링하여 경로(사이드바 등)를 기반으로 페이지의 별도 부분에서 별도의 구성 요소를 렌더링하는 방법을 보여주는 것입니다.

우리가 할 첫 번째 작업이자 이 게시물의 진정한 비밀은 경로 배열을 만드는 것입니다. 배열의 각 항목에는 특정 경로에 대한 모든 정보와 렌더링되어야 하는 구성 요소가 포함됩니다.

const routes = [
  { path: '/',
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  { path: '/bubblegum',
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  { path: '/shoelaces',
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
]

이제 이 배열에 대한 경로를 추상화했으므로 Route 를 렌더링할 때마다 해당 배열에 매핑하고 렌더링해야 하는 구성 요소( main 또는 sidebar )를 지정할 수 있습니다. 이 작업이 어떻게 수행되는지 보여주기 위해 먼저 앱의 기본 골격을 구축해 보겠습니다.

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

const routes = [
  { path: '/',
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  { path: '/bubblegum',
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  { path: '/shoelaces',
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
]

class App extends React.Component {
  render() {
    return (
      <Router>
        <div style={{ display: 'flex' }}>
          <div style={{
            padding: '10px',
            width: '40%',
            background: '#f0f0f0'
          }}>
            <ul style={{ listStyleType: 'none', padding: 0 }}>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/bubblegum">Bubblegum</Link></li>
              <li><Link to="/shoelaces">Shoelaces</Link></li>
            </ul>

          </div>
        </div>
      </Router>
    )
  }
}

export default App

이제 여기의 목표는 경로를 기반으로 앱의 다른 위치에서 여러 구성 요소를 렌더링하는 것임을 기억하십시오. 우리는 이미 routes 배열을 가지고 있으므로 일부 Route 를 렌더링하려는 곳이면 어디든지 매핑할 수 있습니다. 먼저 사이드바(내비게이션 내부)에 Route 몇 개를 추가해 보겠습니다.

render() {
  return (
    <Router>
      <div style={{ display: 'flex' }}>
        <div style={{
          padding: '10px',
          width: '40%',
          background: '#f0f0f0'
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/bubblegum">Bubblegum</Link></li>
            <li><Link to="/shoelaces">Shoelaces</Link></li>
          </ul>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.sidebar}
            />
          ))}
        </div>
      </div>
    </Router>
  )
}

주목해야 할 가장 큰 것은 route.sidebar 를 Route s component prop으로 전달했다는 것입니다. 이것은 예제의 핵심이며 앞서 생성한 routes 배열의 중요성을 보여줍니다. 이제 위치가 path와 일치할 때마다 사이드바 구성 요소가 렌더링됩니다. 그러나 우리는 거기에서 멈추고 싶지 않습니다. 또한 위치가 경로와 일치할 때 앱의 본체에 구성 요소를 렌더링하려고 합니다. 이를 위해 routes 를 다시 매핑하지만 component route.sidebar 를 전달하는 대신 route.main 를 전달합니다.

render() {
  return (
    <Router>
      <div style={{ display: 'flex' }}>
        <div style={{
          padding: '10px',
          width: '40%',
          background: '#f0f0f0'
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/bubblegum">Bubblegum</Link></li>
            <li><Link to="/shoelaces">Shoelaces</Link></li>
          </ul>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.sidebar}
            />
          ))}
        </div>

        <div style={{ flex: 1, padding: '10px' }}>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.main}
            />
          ))}
        </div>
      </div>
    </Router>
  )
}

🕺. 이제 React Router를 사용하여 페이지에서 둘 이상Route을 렌더링하고 일치시킬 수 있고 경로를 배열로 추상화했기 때문에 위치가 일치할 때마다 페이지의 다른 섹션에서 다른 구성 요소를 렌더링할 수 있습니다Route. spath .


이것은 원래 TylerMcGinnis.com에 게시되었으며 React Router 과정의 일부입니다.