反应路由器中带有参数的儿童重新加载页面答案

【问题标题】：Children with params reload page in react router反应路由器中带有参数的儿童重新加载页面
【发布时间】：2017-08-13 17:11:42
【问题描述】：

我在使用参数定义的 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 的链接，以将其链接到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>
}

但是，当我单击链接以访问课程详细信息时，它会重新加载页面。我不明白这一点，它不应该重新加载页面。

对我有什么建议吗？

【问题讨论】：

你能从你的 ClassOverview 组件中添加代码吗？您使用 Link 的方式可能存在一些问题，因为这应该是拦截点击并通过路由器而不是通过浏览器运行它。
是的，当然。我将编辑上面的帖子

标签： javascript reactjs react-router

【解决方案1】：

为了链接到路由器中的另一个 URL，您必须使用 <Link> component。该组件将拦截指向浏览器的点击并将其发送到路由器。它可以与标准的<a> 互换，除了采用to 属性。

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

【讨论】：