☰

React Router パラメータをコンポーネントに渡す 質問する

tag-icon • tag-icon reactjs react-router
React Router パラメータをコンポーネントに渡す 質問する 
const rootEl = document.getElementById('root');

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <MasterPage />
            </Route>
            <Route exact path="/details/:id" >
                <DetailsPage />
            </Route>
        </Switch>
    </BrowserRouter>,
    rootEl
);

アクセスしようとしていますidDetailsPageコンポーネントにアクセスできません。試してみました

<DetailsPage foo={this.props}/>

DetailsPage にパラメータを渡そうとしましたが、無駄でした。

export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >

            </div>
            </div>
    );
    }
}

それで、ID を DetailsPage に渡す方法をご存知ですか?

ベストアンサー1

コンポーネント内の ID にアクセスするためにこれを使用しました:

<Route path="/details/:id" component={DetailsPage}/>

詳細コンポーネントでは次のようになります。

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}

これにより、h2 内の任意の ID がレンダリングされます。誰かの役に立つことを願っています。

おすすめ記事