2016-05-18 14 views
0

私のルータ:react-routerのコンポーネントでパラメータを使用するにはどうすればよいですか?

import React from 'react'; 
import Application from './Application'; 
import { Route } from 'react-router'; 
import JobsScreen from './jobs-screen/JobScreen' 
import TaskScreen from './task-screen/TaskScreen' 

const routes = (
    <Route name="app" path="/" component={Application}> 
     <Route name="jobs_screen" path="jobs" component={JobsScreen}/> 
     <Route name="task_screen" path="task/:enquiryid" component={TaskScreen}/> 
    </Route> 
); 

export default routes; 

私のコンポーネントによってレンダリング:

render() { 
    return (
     <div> 
      {this.props.enquiryid} 
     </div> 
    ); 
} 

しかし、これは動作しません、私はターゲットコンポーネントでルートパラメータにアクセスする方法を教えてください。

答えて

0

あなたが使用する必要があるドキュメントのソースコードから

const { enquiryid } = this.props.params

例のparams:

ルータ

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="user/:userID" component={User}> 
     <Route path="tasks/:taskID" component={Task} /> 
     <Redirect from="todos/:taskID" to="tasks/:taskID" /> 
     </Route> 
    </Route> 
    </Router> 

コンポーネント

class User extends Component { 
    render() { 
    const { userID } = this.props.params 

    return (
     <div className="User"> 
     <h1>User id: {userID}</h1> 
     <ul> 
      <li><Link to={`/user/${userID}/tasks/foo`} activeClassName="active">foo task</Link></li> 
      <li><Link to={`/user/${userID}/tasks/bar`} activeClassName="active">bar task</Link></li> 
     </ul> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 
+0

{this.props.routeParams.enquiryid}はありませんか? – imperium2335

+0

@ imperium2335例を追加しました。それが助けてくれることを願っています –

+0

余分なものもありがとう、私ができるとき受け入れます。 – imperium2335

関連する問題