web-dev-qa-db-ja.com

React-Router：ES6クラスとして宣言されたコンポーネントに「一致」オブジェクトを渡す方法

反応ルーター（v4）は初めてで、この小さな問題が発生するまでチュートリアルに従っていました。

このコードは非常にうまく機能します

class App extends Component {
render() {
return (
    <Router>
       <div>
           <ul>
              <li><Link to="/link/value1" className="nav-link">Value1</Link></li>
              <li><Link to="/link/value2" className="nav-link">Value2</Link></li>
              <li><Link to="/link/value3" className="nav-link">Value3</Link></li>
         </ul>
         <hr/>
         <Route path="/link/:id" component={Generic}/>
       </div>
    </Router>
);
}
}

3つのリンクを含む/ link /：idへのルートを定義しました。次に、このような（関数として）「汎用」コンポーネントを宣言します。

const Generic = ({ match }) => (
<div className="wrapper">
    <div className="section">
        <div className="container">
            <h3>Menu : {match.params.id}</h3>
        </div>
    </div>
</div>
)

これは期待通りに機能し、問題ありません。しかし、今、私はこのようなES6クラス構文でコンポーネントを宣言したいと思います：

class Generic extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div className="wrapper">
            <div className="section">
                <div className="container">
                    <h3>Menu : {this.props.params.id}</h3>
                </div>
            </div>
        </div>
    );
}
}

そして、ここで私はエラーがあります：未定義のプロパティ「id」を読み取ることができません

ES6クラスアプローチを使用して「match.params.id」プロパティにアクセスするにはどうすればよいですか？

ご協力ありがとうございました。

es6-classreact-router-v4
20
Cabrinha

つかいます {this.props.match.params.id}

30
Riccardo Caroli

コンポーネントにいくつかの小道具を渡す必要がある場合は、このアプローチを使用します:(例）

<Route
  path='/home'
  render={(props) => <Home {...props} user = {this.state.user} />}
/>

ターゲットコンポーネントで、this.props.user＆this.props.match.params.idを使用して、propとrouterパラメーターの両方にアクセスできるようになりました

4
Pransh Tiwari