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. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |