在React JS中更改路线时调用函数

问题描述

下面是App.js文件。每当我单击任何导航栏时，都会渲染所选路线。

function App() {
    return (
        <div>
            <Layout>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/success-cards" component={Success_Cards} />
                    <Route path="/failure-cards" component={Failure_Cards} />
                    <Route path="/snap-photo" component={Snap_Photo} />
                    <Route path="/all-cards" component={All_Cards} />
                    <Route path="/user-guide" component={User_Guide}/>
                    <Route path="/rejected-cards" component={Rejected_Cards} />
                </Switch>
            </Layout>
        </div>
    );
}

export default App;

我想要的是当我单击某个导航栏时，它应该调用API作为默认值以获取少量数据。最具挑战性的部分是我应该使用哪种方法在路由更改上实现调用函数来获取数据。谁能帮忙。我尝试了comoponentDidMount，componentShouldMount等...

解决方法

关于documentation在componentDidMount中获取数据是正确的选择

,

如果不是这样，我建议您使用钩子，否则，处理所需内容的一种可能方法是将每个路由的组件包装在同一组件中，然后将useEffect (hook version)或componentDidMount该组件的功能。这样，每次渲染其中包含的任何路由时，都会触发相同的逻辑。