加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React Router Pass Param to Component

发布时间:2020-12-15 20:54:40 所属栏目:百科 来源:网络整理
导读: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组
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?

如果要将props传递给路径中的组件,最简单的方法是使用渲染,如下所示:
<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

您可以使用以下方法访问DetailPage内的道具:

this.props.match
this.props.globalStore

传递原始Route的道具需要{… props},否则你只能在DetailPage中获得this.props.globalStore.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读