React Router의 새로운 뷰에 Prop을 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React Router의 새로운 뷰에 Prop을 전달하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-01 06:10:02

원래의

247명이 탐색했습니다.

How to Pass Props to a New View in React Router?

Link React-Router에서 Prop 전달

문제:

React-Router 애플리케이션에서 Link 구성 요소는 다음과 같습니다. 링크의 매개변수에 속성이 포함되어 있음에도 불구하고 새 보기에 속성을 전달하지 않습니다.

해결책:

오래된 코드(v1):

<Link to="ideas" params={{ testvalue: "hello" }}></Link>

<Route name="ideas" handler={CreateIdeaView} />

로그인 후 복사

최신 코드(v4/v5):

// Using query
<Link to={{ pathname: `/${this.props.testvalue}`, query: { backUrl } }} />

// Using search
<Link to={{ pathname: `/${this.props.testvalue}`, search: `?backUrl=${backUrl}` }} />

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

로그인 후 복사

사용법:

다음 속성을 가진 객체를 취합니다:
- pathname: 새 보기의 경로.
- params: 새 보기에 전달될 속성이 포함된 객체.
Route 구성 요소에는 to 속성의 동적 매개 변수 값과 일치하는 경로 속성이 있어야 합니다.

기능 구성 요소 예:

<code class="js">const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();
  console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'));
  return <span>{testvalue} {backurl}</span>;
};</code>

로그인 후 복사

참고: 위 코드는 React-router-dom의 후크를 사용합니다.

업데이트된 코드 예:

<code class="js">const App = () => {
  return (
    <React.Fragment>
      <Link to={{ pathname: '/ideas/:itemID', itemID: 222, item: { okay: 123 } }}>Ideas</Link>
      <Switch>
        <Route exact path="/ideas/:itemID/" component={Ideas} />
        <Route path="/hello/:WORLD?/:thing?" component={World} />
      </Switch>
    </React.Fragment>
  );
};</code>

로그인 후 복사

위 내용은 React Router의 새로운 뷰에 Prop을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!