React コンポーネント通信ルーティングパラメータ転送 (react-router-dom)

npm インストール -S react-router-dom

'./component/ManageSystem' から Home をインポートします。
'react-router-dom' から { BrowserRouter を Router としてインポートします。
関数App() {
  戻る （
    <Router> //ルート パッケージ。ホームページ内の 1 つ以上のページでルートの切り替えが必要になる場合があります <div id="App">
        <ホーム />
      </div>
    </ルーター>
  );
}
 
デフォルトアプリをエクスポート

'react' から React をインポートします。
'../utils/loadable' から Loadable をインポートします
「react-router-dom」から {Route、Link、withRouter、Redirect、Switch} をインポートします。
'element-react' から Button をインポートします。
// 最初の画面のレンダリングを高速化するためにコンポーネントを動的にロードします const About = Loadable(() => import('./About.js'))
const Users = Loadable(() => import('./Users.js'))
クラス Home は React.Component を拡張します {
    与える（） {
	    戻る （
		<div style={{ position: 'relative' }}>
		    <nav style={{ position: 'absolute', top: '0', left: '60%' }}>
				<ul>
				    <li style={{ marginBottom: '10px' }}>
				        <Link to={{pathname:"/home/about",query:{ text: '666' }}}>概要</Link>
				    </li>
			        <li>
			            <Link to={{pathname:"/home/users/999",state:{ text: '888' }}}>ユーザー</Link>
					</li>
				</ul>
			</nav>
			<div style={{ position: 'absolute', top: '20px', right: '20px' }}>
			    <スイッチ>
				    <ルートの正確なパス="/home" コンポーネント={() => { return null }}>
				    </ルート>
				    <ルートの正確なパス="/home/about" コンポーネント={About}>
				    </ルート>
				    <ルートの正確なパス="/home/users/:id" コンポーネント={Users}>
				    </ルート>
				    <リダイレクト元="/" to='/home' />
			    </スイッチ>
			</div>
		</div>
		);
	}
}
/*
高レベルコンポーネントの withRouter は、コンポーネントを Route にラップするために使用されます。
次に、 react-router、 history、 location、 match の 3 つのオブジェクトがこのコンポーネントの props 属性に配置されます。
*/
ルータ(ホーム)でデフォルトをエクスポート

<ルートの正確なパス="/home/users/:id" コンポーネント={Users}>
</ルート>

<Link to={{pathname:"/home/users/999"}}>ユーザー</Link>

「react」からReactをインポートします。
クラスUsersはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具)
    この状態 = {
      id: this.props.match.params.id //ここでパス動的パラメータスプライシングを介して渡された情報を取得します}
  }
  コンポーネントマウント(){
    console.log(this.props,'ユーザーのプロパティ')
  }
  与える（） {
    戻る （
      <div>
        <span>私はユーザーです: {this.state.id}</span>
      </div>
    ）
  }
}
デフォルトユーザーをエクスポート

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999' }) }}>について</button>
 
//同様に、this.props.match.params.idを使用して値を取得します

<Link to={{pathname:"/home/users",query:{ text: '666' }}}>ユーザー</Link>

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', query: { text: '666' } }) }}>ユーザー</button>
 
//同様に、メソッドthis.props.location.query.textを取得します

<Link to={{pathname:"/home/users",state:{ text: '666' }}}>ユーザー</Link>

<button onClick={() => { this.props.history.push({ pathname: '/home/users/999', state: { text: '666' } }) }}>ユーザー</button>
 
//同様に、メソッドthis.props.location.state.textを取得します

「react」からReactをインポートします。
クラスUsersはReact.Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具)
    この状態 = {
      テキスト: this.props.location.query ? this.props.location.query.text : 'クエリが消えました'
    }
  }
  コンポーネントマウント(){
    console.log(this.props,'ユーザーのプロパティ')
  }
  与える（） {
    戻る （
      <div>
        <span>私はユーザーです: {this.state.text}</span>
      </div>
    ）
  }
}
デフォルトユーザーをエクスポート