HOWTO · React
React JS의 조건부 라우팅
이 튜토리얼에서는 React JS의 조건부 라우팅에 대해 설명합니다.
이 페이지의 내용
사용자를 다른 페이지로 안내해야 하는 경우가 있습니다. 예를 들어, 사용자가 잘못된 정보로 양식을 채운 경우 잘못된 데이터에 대해 사용자에게 알리는 다른 페이지로 사용자를 이동할 수 있습니다.
React JS에서는 라우팅이라고 합니다. 주로 사용자를 다른 위치로 안내하는 데 사용됩니다.
주로 지정된 조건에 따라 사용자를 다른 페이지로 전송하는 조건부 라우팅이라는 라우팅이 있습니다.
이 기사에서는 웹 애플리케이션에서 조건부 라우팅을 설정하는 방법을 보여줍니다. 또한 주제를 더 쉽게 만들기 위해 필요한 예와 설명을 볼 것입니다.
웹 애플리케이션에서 조건부 라우팅 적용
아래 예에서는 웹 애플리케이션에서 조건부 라우팅을 설정하는 방법을 설명합니다. 아래 코드를 살펴보십시오.
예제 코드 - App.js:
// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'
export default function App() {
var Newpage = false;
// Applying condition
if (Newpage) {
return (
<BrowserRouter>
<Routes>
<Route path="*" element={<Router />} />
</Routes>
</BrowserRouter>
)
} else {
return (
<h1>Page not changed</h1>
)
}
}
아래에 표시된 위 코드의 더 짧은 버전도 있습니다.
예제 코드 - App.js:
// importing necessary packages and files
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Router from './router'
export default function App() {
var Newpage = true;
return (
<BrowserRouter>
<Routes>
<Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />
</Routes>
</BrowserRouter>
)
}
위의 예에서 다음 행에 인라인 조건을 적용했습니다.
<Route path="/" element={ Newpage ? ( <Router />) : (<h1>No page found...</h1>)} />
또한 우리는 이미 각 코드 블록의 목적을 명령했습니다. 이제 다음과 같은 index.js 파일을 살펴보겠습니다.
예제 코드 - index.js:
// importing necessary packages and files
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
이제 모든 파일을 완료하면 브라우저에 아래와 같은 출력이 표시됩니다.
이 튜토리얼은 react-select 패키지를 사용하므로 애플리케이션을 실행하기 전에 이 패키지를 설치해야 합니다. npm을 사용하여 쉽게 설치할 수 있습니다.
이 글에서 공유하는 예제 코드는 React JS 프로젝트로 작성되었습니다. 그리고 React 프로젝트를 실행하려면 시스템에 최신 Node JS 버전이 있어야 합니다.
시스템에 Node JS가 없으면 먼저 설치하십시오.
