[React] navigate 에러 (홈 화면으로 돌아가기)

컴포넌트들이 다 마운트 된 이후에만 navigate()함수가 작동할 수 있음

 

BrowserRouter가 공급하고 있는 기능임

 

변경 전

처음 실행되었을 때 부터 호출 시키면 안 됌 전부 마운트 시키고 나서 호출해야 함

    const getCurrentDiaryItem = () => {
        const currentDiaryItem = data.find((item) => String(item.id)===String(params.id))

        if(!currentDiaryItem) {window.alert("존재하지 않는 일기입니다."); nav("/", {replace: true})}

        return currentDiaryItem;
    }

    // 컴포넌트가 처음 호출 될 때 실행이 됌
    const currentDiaryItem = getCurrentDiaryItem();
    
    return <div>
        <Header />
        <Editor />
    </div>

 

 

변경 후

    useEffect(() => {
        const currentDiaryItem = data.find((item) => String(item.id)===String(params.id))

        if(!currentDiaryItem) {window.alert("존재하지 않는 일기입니다."); nav("/", {replace: true})}

        setCurrentDiaryItem(currentDiaryItem);
    }, [params.id, data]);
    
        return <div>
        <Header />
        <Editor initData={currentDiaryItem} />
    </div>