React는 웹 페이지를 디자인하는 데 가장 자주 사용하는 프레임워크 중의 하나입니다.그러나 그것은 여전히 결함이 있다.그 중 하나는 내장 공유기가 부족하다는 것이다.React 라우터 들어가기!이 웹 사이트에서 설명한 바와 같이, React Router는 내비게이션 구성 요소의 집합입니다. 프로그램에서 설명 방식으로 작성할 수 있습니다.예를 들어, 한 페이지 응용 프로그램을 만들려고 하지만 여러 개의 보기를 통합할 계획이라면, 전체 페이지를 새로 고칠 필요 없이 이 보기를 보여줄 수 있습니다.React 라우터 6.0 버전 (현재 테스트 단계) 의 이러한 실현을 살펴봅시다.

설치 프로그램

react 응용 프로그램을 구축하는 가장 간단한 방법은 터미널에서 "npxcreatereact 응용 프로그램"명령을 사용하는 것입니다. 따라서 우리는 당신이 이 점을 했다고 가정합니다.거기에서 응용 프로그램의 루트 폴더로 이동하여react-router@next및 react-router-dom@next.그런 다음 src/App로 이동합니다.js 파일, 페이지 상단의 가져오기 목록에 다음 내용을 추가합니다.

import { 
  BrowserRouter as 
    Router, 
    Routes, 
    Route, 
    Link, 
    Outlet, 
    useParams,
  } from 'react-router-dom';

그것들의 각자의 역할에 대해 나는 그것들을 사용할 때 설명할 것이다.여기서, 우리는 인코딩을 시작할 준비를 합니다!

입문

우선, 우리는 요소 내부에 React 구성 요소를 보여 줍니다. 이 구성 요소는 우리가 이전에 가져온 공유기 이름을 가지고 있습니다.그래야 한다.

function App() {
  return (
    <Router>
      Hello!
    </Router>
  );
}

우리의 모든 루트는 이 두 공유기 라벨 사이에 성명될 것이다. 이것은 이상하게 루트를 처리할 수 없다.각각의 노선은 "route"라벨을 사용하여 설명하고 주어진 "Routes"라벨의 구성 요소에 저장됩니다.이를 위해 라우팅은 이전 버전의 React 라우터의 스위치 구성 요소로서 상대 라우팅과 링크, 자동 라우팅 순위 및 중첩 라우팅을 제공하고, 라우팅은 특정 구성 요소의 UI를 실제로 구현합니다.만약 우리가 정말로 노선을 만들고 그것을 집으로 돌아가는 노선에 두었다면, 이것은 더욱 의미가 있을 것이니, 우리 계속 합시다.여기서부터 생성된 모든 내용은 위에 생성된 응용 프로그램 함수에 포함되거나 이 함수의 반환 호출에 대한 수정이 포함됩니다.

const Home = () => {
  return (
    <div>
      <h1>
        Welcome Home!
      </h1>
      <p>This is where you live!</p>
    </div>
  )
};

return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );

여기서 보실 수 있습니다. 저희가 표시하고자 하는 구성 요소를 만들었습니다, 홈.경로 속성이 있는 Route 요소를 사용하여 기본 URL 뒤의 주소 표시줄에 다른 내용이 없을 때 Home을 표시하고자 합니다.우리는 이미 이 노선을 우리의 노선 목록에 놓았다.노선이 실행되는 것을 볼 수 있도록 다른 구성 요소를 추가합니다.

const Whales = () => {
  return (
    <div>
      <h2>
        Whale Facts:
      </h2>
      <p>Whales are large mammals. Neat!</p>
    </div>
  )
};

return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/whales" element={<Whales />} />
      </Routes>
    </Router>
  );

그 후에 우리는 두 가지 가능한 노선이 있다.만약 다른 내용을 변경하지 않았다면, 터미널에서 "npmstart"를 실행할 때, localhost:8000으로 안내되어 다음과 같은 내용을 볼 수 있습니다.

url localhost: 8000/whales로 이동하면 다음을 볼 수 있습니다.

멋있어요. 그런데 사람들이/whales로 가야 당신의 멋진 고래 정보를 볼 수 있다는 것을 어떻게 알아요?답은 그것들이 아니라는 것이다. 우리는 이전에 가져온 링크 변수를 사용하여 그것들을 그곳에 보낼 것이다.

링크

링크를 사용하면 페이지를 새로 고칠 필요 없이 다른 보기로 이동할 수 있습니다.우리는 링크를 사용하여 내비게이션 표시줄을 만들고 하이퍼링크와 단추와 같은 것을 사용하여 서로 다른 보기 사이를 전환할 수 있다.코드를 수정하여 다음을 수행합니다.

return (
    <Router>
      <nav>
        <Link
          to="/"
          style={{ padding: 10 }}
        >
          Home
        </Link>
        <Link
          to="whales"
          style={{padding: 10}}
        >
          Whales!
        </Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/whales" element={<Whales />} />
      </Routes>
    </Router>
  );

우리가 여기서 하는 일은 nav 요소를 설명하고 두 개의 링크를 추가하는 것입니다. 첫 번째(Home)는 "/"에서 지정한 경로, 두 번째(Whales!)"whales"가 지정한 경로에 연결합니다.우리 홈페이지는 지금 이렇게 보인다.

두 링크를 클릭하면 해당 뷰가 변경됩니다.깔끔했어하지만 더 강력한 도구가 하나 더 있습니다. 제가 말씀드리고 싶은 것은...

네스트된 파이프라인

웹 페이지의 일부분은 변하지 않고 페이지의 일부 하위 구성 요소가 변경되면 끼워 넣는 루트가 나타납니다.우리는 우리가 가져온 수출 파라미터를 사용하여 이 점을 실현한다.잠수하기 전에 우리는 먼저 약간의 준비를 한다.우선, 우리는 보여줄 정보를 작성할 것이다.

const PorcupineFacts = [
  {
    num: 0,
    type: 'Old-world porcupines',
    desc: 'These are porcupines!'
  },
  {
    num: 1,
    type: 'New-world porcupines',
    desc: 'These are ALSO porcupines!'
  }
];

다음에 표시할 정보의 일부를 선택할 수 있도록 부모 구성 요소를 추가합니다.

const Porcupines = () => {
  return (
    <div>
      <h2>
        Porcupines
      </h2>
      <Outlet />
    </div>
  )
};

여기서 Outlet 요소를 배치했습니다.일치하는 모든 하위 구성 요소는 outlet 태그 대신 렌더링됩니다.다음은 우리 서브어셈블리를 만들고, 다음은 렌더링에 대한 최종 업데이트입니다.

const PorcupineList = () => {
  return (
    <ul>
      {PorcupineFacts.map((porc) => (
        <li key={porc.num}>
          <Link to={`/porcupines/${porc.type}`}>
            {porc.type}
          </Link>
        </li>
      ))}
    </ul>
  )
}

const Facts = () => {
  const { porcs } = useParams();
  const info = PorcupineFacts.filter(porcupine => porcupine.type === porcs)[0];
  return (
    <div>
      <h3>{info.type}</h3>
      <p>{info.desc}</p>
    </div>
  );
}

return (
  <Router>
    <nav>
      <Link
        to="/"
        style={{ padding: 10 }}
      >
        Home
      </Link>
      <Link
        to="whales"
        style={{padding: 10}}
      >
        Whales!
      </Link>
      <Link
        to="porcupines"
        style={{padding: 10}}
      >
        Porcupines
      </Link>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/whales" element={<Whales />} />
      <Route path="porcupines" element={<Porcupines />} >
        <Route path="/" element={<PorcupineList />} />
        <Route path=":porcs" element={<Facts />} />
      </Route>
    </Routes>
  </Router>
);

네, 방금 일어난 일을 이야기합시다.데이터 목록의 모든 항목을 한 번 렌더링하는 하위 요소를 만들었습니다. (주의.map?)렌더링할 때마다 그 자체는 모든 데이터 항목의 유형 속성에 따라 새로운 링크를 만듭니다.이 링크 앞에/porcupines/가 있습니다. 이것이 바로 우리가 루트 목록에서 부르는 경로입니다.우리의 마지막 새 루트 (:porcs) 에서, 우리가 만든 마지막 구성 요소facts를 렌더링하여 호출했습니다.Facts는 useParams()를 사용하여 이 예에서 Proc로 링크 태그에 전달된 매개변수를 가져옵니다.유형우리는 이 매개 변수를 사용하여 데이터 대상에서 적당한 정보를 찾고 에서 이 정보를 렌더링합니다.우리의 노선에서, 우리는 두 노선을 전체 돼지 노선에 끼워 넣을 것이다.우리는 또한 네비게이션 표시줄을 위해 편리한 호화로운 돼지 링크를 추가했다.우리 한번 되돌아봅시다.우리 홈페이지는 지금 보기에 다음과 같다.

호화로운 돼지 구성 요소와 데이터에 있는 모든 대상의 호화로운 돼지 목록 구성 요소의 렌더링을 보려면 호화로운 돼지 구성 요소를 클릭하십시오.

마지막으로 구대륙의 호화로운 돼지를 눌러서 우리의 링크와 사실 구성 요소의 표현을 살펴보자. 이 모든 것들은 한 페이지로 새로 고칠 필요가 없다.

결론

React Router는 페이지 내비게이션과 페이지 리셋을 더욱 잘 제어할 수 있는 좋은 방법입니다.그것은 내장 공유기가 부족하다는 vanilla의 약점을 해결했다.