쓸모없는 반복 경로를 바꾸는 방법

쓸모없는 반복 경로를 바꾸는 방법

나는 처음으로 리액터러터와 함께 일한다.

여기 내 코드 조각이 있다.

 <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/A/xx/xxx/:feeros" component={About} />
    <Route path="/B/xx/xxx/:feeros" component={About} />
    <Route path="/C/xx/xxx/:feeros" component={About} />
    <Route path="/D/xx/xxx/:feeros" component={About} /> 
  </Switch>

이 부분은.<Route path="//xx/xxx/:feeros" component={About} />코드는 항상 반복된다.이 반응 라우터를 줄일 방법이 없으십니까?

만약 당신이 네개의 특정 루트를 다룰 필요가 있다면 (A | B | C | D);

<Route path="/(A|B|C|D)/xx/xxx/:feeros" component={About} />

그래도 파라미터를 가로채야 하지만 값이 A | B | C | D |만 될 수 있다면 다음과 같이 쓸 수 있다.

<Route path="/:letter(A|B|C|D)/xx/xxx/:feeros" component={About} />

다음 두 가지 매개 변수를 사용하십시오.

const { letter, feeros } = match.params;

글자만: "A", "B", "C" 또는 "D"

다른 정규식을 사용할 수 있다.

예를 들면 다음과 같다.

<Route path="/([a-zA-Z])/xx/xxx/:feeros" component={About} />

이 경로는 다음과 같은 라틴어 한 글자에 대해 작동된다.

'/A/xx/xxx/value'
'/s/xx/xxx/value'
'/F/xx/xxx/value'

또한 다음과 같은 매개 변수에 정규식을 사용할 수 있다.

<Route path="/([a-zA-Z])/xx/xxx/:feeros(\d{2})" component={About} />

두 자리 수의 0 값을 사용하여 경로 일치:

'/A/xx/xxx/11'
'/s/xx/xxx/21'
'/F/xx/xxx/45'

경로 매개 변수를 사용하십시오.

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/:letter/xx/xxx/:feeros" component={About} />
</Switch>

구성 요소 측에서 매개 변수 값을 가져올 수 있음:

componentDidMount() {
  const { match: { params } } = this.props;

  console.log(params.letter);
  console.log(params.feeros);
}

식별하기 위한 매개 변수가 있을 수 있다.A,B등

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/:id/xx/xxx/xx" component={About} />
</Switch>

참조URL: https://stackoverflow.com/questions/57291234/how-to-change-useless-repeat-route