在反应js中的路线变化上调用一个函数

Question

下面是 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 等...

Answer 1

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

Answer 2

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

在反应js中的路线变化上调用一个函数

on route change in react js call a function

function

reactjs

react-router

react-router-dom

react-lifecycle