React Router将参数传递给组件

Question

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

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

我正在尝试访问DetailsPage组件中的 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>
    );
    }
}

所以有什么想法如何将ID传递给DetailsPage吗？

Answer 1

如果要将props传递到路线内的组件，最简单的方法是利用render，如下所示：

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

您可以使用以下内容访问道具DetailPage：

this.props.match
this.props.globalStore

将{...props}需要通过原路线的道具，否则你将只能得到this.props.globalStore内DetailPage。