有參數的孩子在React Router中重新加載頁面

Question

我有一個關於使用參數定義的URL重新加載頁面的問題。 在routes.js文件中：

<Route path='/classes' component={Classes}>
    <Route path='/classes/:class_id' component={ClassDetails} />
</Route>

在組件類中，我這樣寫：

render() {
    const detailClasses = (this.props.classStore.classes && (this.props.classStore.classes.length > 0))
    ? this.props.classStore.classes.map(
          (classDetailOverview, i) => {
              return <ClassOverview classData={classDetailOverview} key={i} />}
    ): null;
    return <div className="container">
                <h2>Hello in Class Details page</h2>
                <Box className="OgeClassesPage">
                    {this.props.children ? this.props.children : detailClasses}
                </Box>
           </div>;
}

在ClassOverview組件中，我導入了react-router的Link，以將其鏈接到ClassDetails組件中。

 render () {
    const classUrl = 'classes/' + this.state.classOverview.class_id
    return <Box className='OgeClassBox' alignContent='center' align='center'>
      <a href={classUrl}><h3>
        {this.state.classOverview.class_title}
      </h3>
      </a>
    <img className='OgeClassImage' src={this.state.class_image} />
    <div className='OgeClassDesc padding-10'>
      {this.state.classOverview.class_description.slice(0, 100)}
    </div>
  </Box>
}

但是，當我單擊鏈接訪問課程詳細信息時，它將重新加載頁面。 我對此不了解，不應重新加載頁面。

對我有什么建議嗎？

Answer 1

為了鏈接到路由器內的另一個URL，您必須使用<Link>組件 。 該組件將攔截前往瀏覽器的點擊，然后將其發送到路由器。 它是一個標准的可互換<a> ，以期達到一個例外to支撐。

<Link to={classUrl}>
  <h3>
    {this.state.classOverview.class_title}
  </h3>
</Link>