paramsを持つ子供が反応ルータのページをリロードする

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コンポーネントで、私はClassDetailsコンポーネントへのリンクのためにそれをreact-routerのリンクをインポートします。

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> componentを使用する必要があります。このコンポーネントは、ブラウザに向かうクリックを代行受信し、代わりにルータに送信します。標準<a>と互換性がありますが、to支柱を除きます。

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