Question

我在个人资料页面上有一个链接，可链接到另一个类似的个人资料页面。如果你去直接链接的地址 - 在页面加载正确。但是，如果你遵循从页面的链接，只有线的地址发生变化，内容未更新。

链路不工作：

<Link to={`/project/2`} params={ 2 } ></Link>

此链接位于页面上的以下位置：

<Link to={`/project/1`} params={ 1 } ></Link>

我的意思是，事实是，我们实际上已经在页/项目/ X，和x不会导致内容被更新的任何变化。如何解决这个问题？

UPD：呈现个人资料页面的代码：

import React from 'react';
import {Link} from 'react-router-dom';
import './css/stl_style.css';
import './css/app_style.css';
import arrow from './images/arrow.png';
import { changeBg,  loadProject,  hoverText, nohover, TabForOpenNew, openTabNew} from './scripts/portfolio_script.js';


 export class ProjectLayout extends React.Component{
        constructor(props){
        //constructor
    }
      componentDidMount(){
        //componentDidMount
      }

    render(){
        return(
        <div id="page">
<span className="stl22 stl21 stl6" >Previous:<pre className="stl3 stl22 stl6 stl23 p5 p6" onMouseOver={(e)=>hoverText(e)} onMouseOut={(e)=>nohover(e)}><Link style={{color:'black', textDecoration:'none'}} to={`/project/ ${this.state.previous.ID}`} params={ this.state.previous.ID }>{`${this.state.previous.NameProject}`.toUpperCase()}</Link></pre></span>
<span className="stl22 stl21 stl6" >Next:<pre className="stl3 stl22 stl6 stl23 p5 p6" onMouseOver={(e)=>hoverText(e)} onMouseOut={(e)=>nohover(e)}><Link style={{color:'black', textDecoration:'none'}} to={`/project/ ${this.state.next.ID}`} params={ this.state.next.ID }>{`${this.state.next.NameProject}`.toUpperCase()}</Link></pre></span>

    </div>
        );
    }
}

和路线在App.js

<Layout>
            <Route path='/projectList' component={AllProjects} />
            <Route path='/project/:projectId' component={ProjectLayout}/>
            <Route path='/home' component = {Main} />
</Layout>

Answer 1

您需要使用componentWillReceiveProps和里面，你需要旧道具值与新道具的值进行比较，并使用的setState更新您的状态变量，它会正常工作。

如何在有条件的同一页面上的链接中正确指定路径

1 个答案: