Javascript 执行不同的组件'；s函数

我已经实现了一个header。每当点击标题内部的链接

公文包

，路线就会改变-我想另外触发另一个组件的（

持卡人

）功能。我怎样才能做到

组件还没有连接

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header/>
                ...
                <CartHolder />
            </div>
        </BrowserRouter>
    );
}

函数应用程序（）{
返回(
...
);
}

const头=（）=>{
返回(


文件夹


关于


);
};

---

顺便说一句，

CartHolder

是一个基于类的组件。

您可以使用

useffect

和

useLocation

收听

CartHolder

内部的

pathname

更改，检查

pathname

，如果是投资组合路径，则调用该函数

从'react router dom'导入{useLocation}
const CartHolder=（）=>{
const{pathname}=useLocation（）
常数fn=（）=>{
console.log（'portfolio'）
}
useffect（（）=>{
如果（路径名=='/'））{
fn（）
}
}，[pathname]）
返回。。。
}

对于基于类的组件，您需要使用

withRouter

HOC包装组件，该HOC从

react router dom

然后在

componentdiddupdate

中，检查路由是否为公文包路由，但还要检查前一个路由是否与公文包不同，因为每次重新渲染时都会触发componentdiddupdate

从“react router dom”导入{withRouter}
类CartHolder扩展组件{
fn=（）=>{
console.log（'portfolio'）
}
componentDidUpdate=prevProps=>{
const prevPathname=prevProps.location.pathname；
const{pathname}=this.props.location；
if（路径名===“/”&&pathname！==prevPathname）{
这个,fn()
}
}
render（）{
返回。。。
}
}

您有一个路由器，但我看不到任何已定义的路由。

CartHolder

是特定路线的一部分吗？请记住，路由器仅呈现来自当前路由的组件，因此，如果标头和cartholder都在一条路由内，并且

Portfolio

链接到另一条路由，则两者都将被卸载。@DavidGildour无论是哪条路由，cartholder和header都应该显示，因此，我从代码中省去了路由器元素。谢谢！“但我是个新来的反应者——基于类的组件的等价物是什么？”Tim更新了我的答案，让我知道它适合你

const header = () => {
    return (
        <div className="Header container-fluid">
            <div className="row">
                <div className="col-6">

                </div>
                <div className="col-6">
                    <ul>
                        <li>
                            <Link to="/">Portfolio</Link>
                        </li>
                        <li className="ml-4">
                            About
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
};