react router 傳遞參數

react router 傳遞參數





在使用 react 時

需要使用 this.props 傳遞參數

以下介紹如何使用 link 傳遞參數並取得

設定 route 的參數
使用 :name 的格式
傳遞的變數名就是 name
如果需要多個參數可以延長
/:var1/:var2

<Switch>
   <Route path='/page/:id' component={Page}/>
   <Route path='/page2/:name' component={Page2}/>
</Switch>

 link 處決定參數

 <li><Link to='/page/5'>Page</Link></li>
 <li><Link to='/page2/3'>Page2</Link></li>

兩個 component
分別為
Page 和 Page2
不同的語法 取得的方法有些微差異

class Page extends React.Component
{
    render(){return (
        <div>
        <h1>Page</h1>
        <h1>{this.props.match.params.id}</h1>
         </div>
  )};
 
}
var Page2 = function({match}){
    return <h1>Hello {match.params.name}</h1>;
}

example