javascript - 带有参数的子项在 react 路由器中重新加载页面

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 的链接，将其链接到 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>
}

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

对我有什么建议吗？

Answer 1

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

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