React-router：如何将 "match" 对象传递到声明为 ES6 class 的组件中？

Question

我是 react-router (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>
);
}
}

我定义了一条到 /link/:id 的路由，有 3 links 到它。然后我像这样声明我的 "Generic" 组件（作为一个函数）：

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

这按预期工作，没问题。但是现在，我想用 ES6 class 语法声明我的组件，如下所示：

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 class 方法访问 "match.params.id" 属性？

感谢您的帮助。

Answer 1

使用{this.props.match.params.id}

Answer 2

如果您需要将一些道具传递给组件，请使用这种方法：（例如）

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

在目标组件中，您现在可以使用 this.props.user & this.props.match.params.id

访问 prop 和 router 参数

React-router：如何将 "match" 对象传递到声明为 ES6 class 的组件中？

React-router : how to pass "match" object into a component declared as an ES6 class?

es6-class

react-router-v4