useEffect不会在路线更改时触发

Question

我有2个组件几乎以相似的方式工作，但是呈现不同的内容。我在两个都使用useEffect。当我第一次挂载LcAnalysis.js时，将触发useEffect，并且一切正常。但是，当我先安装ConversionAnalysis.js并转到LcAnalysis.js时，根本不会触发useEffect。我想这与以下事实有关：我在两者中都使用了useEffect，也许我应该在卸载组件后做一些事情？我将粘贴下面的所有代码。

App.js：

const App = () => {
    return (
        <Wrapper>
            <BrowserRouter>
                <Route path="/" component={Sidebar}/>
                <MainPanel>
                    <ToastContainer/>
                    <Route path="/" component={() => <Navbar />}/>
                    <Switch>
                        <Route path="/lc-analysis">
                            <LcAnalysis />
                        </Route>
                        <Route path="/conversion-analysis">
                            <ConversionAnalysis />
                        </Route>
                    </Switch>
                </MainPanel>
            </BrowserRouter>
        </Wrapper>
    );
};

export default App;

LcAnalysis.js：

const LcAnalysis = ({lcData, fetchResults, fetchPrevResults, prevLcData, apiCallStatus}) => {
    const [period, setPeriod] = useState(staticData['months']["total"]);
    const [month, setMonth] = useState('total');

    useEffect(() => {
        toastDefault('Loading ' + month + ' data. Be patient pls :)');
        fetchResults(period.date).catch(error => toastError(error));
        fetchPrevResults(period.prevDate).catch(error => toastError(error));

    }, [period, fetchResults, month, fetchPrevResults]);


    return (
        <Content>
            Some content here....
        </Content>
    );
};

const mapStateToProps = state => ({
    lcData: state.lcData,
    prevLcData: state.prevLcData,
    apiCallStatus: state.apiCallStatus
});

export default connect(mapStateToProps, {fetchResults, fetchPrevResults})(LcAnalysis);

ConversionAnalysis.js：

const LcAnalysis = ({lcData, fetchResults, fetchPrevResults, prevLcData, apiCallStatus}) => {
    const [period, setPeriod] = useState(staticData['months']["total"]);
    const [month, setMonth] = useState('total');

    useEffect(() => {
        toastDefault('Loading ' + month + ' data. Be patient pls :)');
        fetchResults(period.date).catch(error => toastError(error));
        fetchPrevResults(period.prevDate).catch(error => toastError(error));

    }, [period, fetchResults, month, fetchPrevResults]);

    return (
        <Content>
            Some content here....
        </Content>
    );
};

const mapStateToProps = state => ({
    lcData: state.lcData,
    prevLcData: state.prevLcData,
    apiCallStatus: state.apiCallStatus
});

export default connect(mapStateToProps, {fetchResults, fetchPrevResults})(LcAnalysis);