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가 없으면 먼저 설치하십시오.
Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.
LinkedIn