Question

我在使用param定义的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>
}

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

对我有什么建议吗？

Answer 1

要链接到路由器中的其他网址，您必须使用<Link> component。该组件将拦截前往浏览器的点击并将其发送到路由器。它可与标准to互换，但采用<Link to={classUrl}> <h3> {this.state.classOverview.class_title} </h3> </Link>道具除外。

rm -rf

有params的孩子在反应路由器中重新加载页面

1 个答案: