[解決済み] Reactルータからコンポーネントへパラメータを渡す

質問

const rootEl = document.getElementById('root');

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

にアクセスしようとしています。 id にアクセスしようとしていますが、アクセスできません。私は試してみました

<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>
    );
    }
}

では、DetailsPageにIDを渡すにはどうすればいいのでしょうか？

どのように解決するのですか？

ルート内のコンポーネントにpropsを渡したい場合、最も簡単な方法は render を利用することです。

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

の中のプロップにアクセスすることができます。 DetailPage を使っています。

this.props.match
this.props.globalStore

は {...props} は元の Route のプロップを渡すために必要です。 this.props.globalStore の中に DetailPage .