如何在 React-Router 中傳遞 Props？

在 Link React-Router 中傳遞 Props

React-Router 的 Link 元件允許在元件之間傳遞資料。為此，請在連結的 to 屬性中定義參數，並且可以使用 this.props 在連結元件中存取該參數的值。

問題：

提供的程式碼無法將 props 傳遞給連結的元件，因為 中缺少路由路徑。

解：

將路徑參數加入定義：

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

使用Location傳遞資料：

使用react-router v4/v5時，可以透過location物件傳遞資料：

連結（查詢）：

<Link to={{pathname: '/', query: {backUrl: 'theLinkData'}}} />

連結（搜尋）：

<Link to={{pathname: '/', search: '?backUrl=theLinkData'}} />

存取資料（功能元件） ):

const CreatedIdeaView = () => {
  const { query, search } = useLocation();
  console.log(query.backUrl, new URLSearchParams(search).get('backUrl'));
};

存取資料（類組件）：

class CreateIdeaView extends React.Component {
  render() {
    console.log(this.props.location.query.backUrl);
    return <div>{this.props.location.query.backUrl}</div>;
  }
}

範例：

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}

class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}

以上是如何在 React-Router 中傳遞 Props？的詳細內容。更多資訊請關注PHP中文網其他相關文章！