반응형
Response Router - 경로 일치에서 매개 변수를 제한하는 방법
예를 들어 regex와 같이 param을 제한하는 방법을 잘 모르겠습니다.
이 두 루트를 어떻게 구별합니까?
<Router>
<Route path="/:alpha_index" component={Child1} />
<Route path="/:numeric_index" component={Child2} />
</Router>
그리고 "/123"이 첫 번째 루트를 발사하는 걸 막으라고요?
React-router v4에서는 regex를 사용하여 파라미터를 일치시킬 수 있습니다.https://reacttraining.com/react-router/web/api/Route/path-string
const NumberRoute = () => <div>Number Route</div>;
const StringRoute = () => <div>String Route</div>;
<Router>
<Switch>
<Route exact path="/foo/:id(\\d+)" component={NumberRoute}/>
<Route exact path="/foo/:path(\\w+)" component={StringRoute}/>
</Switch>
</Router>
상세정보 : https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#custom-match-parameters
리액트 라우터에서 이것이 가능한지 현재로서는 잘 모르겠습니다.하지만 당신의 문제에 대한 간단한 해결책이 있습니다.다음과 같이 다른 컴포넌트에서 int/alpha 체크를 수행합니다.
<Router>
<Route path="/:index" component={Child0} />
</Router>
const Child0 = (props) => {
let n = props.params.index;
if (!isNumeric(n)) {
return <Child1 />;
} else {
return <Child2 />;
}
}
* 위의 코드는 실행되지 않습니다.제 뜻을 나타내기 위한 것입니다.
언급URL : https://stackoverflow.com/questions/37269736/react-router-how-to-constrain-params-in-route-matching
반응형
'programing' 카테고리의 다른 글
기능 구성요소에 상태 변수가 아닌 변수 저장 (0) | 2023.03.11 |
---|---|
MongoDB 명명 규칙은 무엇입니까? (0) | 2023.03.11 |
"Router"에서는 "history"라는 프로포트가 "required"로 표시되어 있지만, 그 값은 "undefined"입니다. (0) | 2023.03.11 |
왜 ng-href 지령에는 {{}}이(가) 필요한데 다른 지령에는 필요하지 않은가? (0) | 2023.03.11 |
리액트 훅: 콜백 내에서 최신 상태로 접근 (0) | 2023.03.11 |