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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!