HOWTO · React
React Router 4 정규식 경로
이 기사에서는 React 라우터의 경로에 정규식을 추가하는 방법을 알려줍니다.
이 기사에서는 react-router 경로에 정규식을 추가하는 방법을 배웁니다. ID 또는 문자열로 경로를 생성하는 동안 요청을 받는 문자열의 유효성을 검사해야 합니다.
정규식을 사용하면 문자열의 유효성을 검사할 수 있습니다.
react-router V4를 사용하여 정규식을 경로에 추가
React.js에서는 react-router 라이브러리를 사용하여 다양한 경로를 만들 수 있습니다. 모든 경로에 대해 경로를 지정해야 하며 경로에서 얻은 매개변수의 유효성을 검사해야 하는 경우 경로에 정규식을 추가할 수 있습니다.
아래 예에서는 세 가지 다른 경로를 만들었습니다. 첫 번째와 두 번째 경로에서 경로에 정규식을 추가했습니다.
또한 exact={false}를 소품으로 전달하여 홈 구성 요소에 대한 정확한 일치를 비활성화했습니다. 따라서 경로가 일치하지 않으면 사용자를 홈 경로로 리디렉션할 수 있습니다.
첫 번째 경로는 숫자와 문자가 포함된 문자열을 허용하고 두 번째 경로는 숫자만 허용합니다. 경로가 완벽하게 일치하지 않으면 홈페이지가 표시됩니다.
예제 코드:
import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Different components
function Home() {
return <h2>This is Home Page.</h2>;
}
function About() {
return <h2>This is About Page.</h2>;
}
function UserDetails() {
return <h2>This is User Details Page.</h2>;
}
export default function App() {
return (
<>
{/* Router for different paths */}
<Router>
<Switch>
{/* route = /user/id */}
<Route
path="/user/:id(0-9a-f]{8})?"
component={UserDetails}
exact={true}
/>
{/* route = /id */}
<Route path="/:id(\d+)" component={About} exact={true} />
<Route path="/" component={Home} exact={false} />
</Switch>
</Router>
</>
);
}
출력:
user/234edf43과 같은 경로로 이동하면 UserDetails 구성 요소가 표시됩니다.
/1234와 같은 경로로 이동하면 About 구성 요소가 표시됩니다.
/abcd12와 같은 경로는 다른 경로가 일치하지 않기 때문에 홈 구성 요소를 표시합니다.
또한 사용자는 요구 사항에 따라 정규식을 변경할 수 있으며 사용자가 정규식이 제대로 작동하지 않는 것을 발견하면 첫 번째 경로에서 추가한 것처럼 정규식 끝에 물음표를 추가합니다.
