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

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>
}

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

对我有什么建议吗？

Answer 1

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

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