react-router傳參
阿新 • • 發佈:2018-09-22
reac router ret his turn urn mat src element
1.配置中加id
//容器 class Wrapper extends React.Component { constructor(props){ super (props) } render() { return ( <div> <Link to=‘/a/123‘>組件A</Link> <br/> <Link to=‘/b‘>組件B</Link> {this.props.children} </div> ) } }
2.獲取參數使用:
this.props.match.params.id
組件a接收參數的代碼:
class A extends React.Component { constructor (props){ super (props) } render(){ return ( <div> component A 參數是:{this.props.match.params.id} </div> ) } }
3.頁面顯示
4.完整代碼
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import {BrowserRouter as Router,Route,Link} from ‘react-router-dom‘; class A extends React.Component { constructor (props){ super (props) } render(){ return ( <div> component A 參數是:{this.props.match.params.id} </div> ) } } class B extends React.Component { constructor (props){ super (props) } render(){ return <div>component B</div> } } //容器 class Wrapper extends React.Component { constructor(props){ super (props) } render() { return ( <div> <Link to=‘/a/123‘>組件A</Link> <br/> <Link to=‘/b‘>組件B</Link> {this.props.children} </div> ) } } ReactDOM.render( <Router> <Wrapper> <Route path=‘/a/:id‘ component={A}/> <Route path=‘/b‘ component={B}/> </Wrapper> </Router>, document.getElementById(‘app‘) )
react-router傳參