私のルーター：
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>
);
}
しかし、これは機能しません。ターゲットコンポーネントのルートパラメータにアクセスするにはどうすればよいですか？
パラメータを使用する必要があります
const { enquiryid } = this.props.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>
)
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加