programing

Response Router - 경로 일치에서 매개 변수를 제한하는 방법

yellowcard 2023. 3. 11. 08:47
반응형

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

반응형