如何在每个组件中具有“链接”的反应路由器中使用“CSSTransition”？

Question

我有一个包含“路由”的“CSSTransition”组件，但我不能在“链接”组件中放置一个更改“状态”的函数，因为每个组件都在不同的文件中

在 routes.js 中

const Routes = () =\> {

    const [isEnter, setIsEnter] = useState(false)
    
    return(
        <CSSTransition
            in={isEnter}
            timeout={4000}
            classNames='fade'
        >
            <Router>
                <Routes>
                    <Route exact path='/' element={<StartPage />} />
                    <Route path='/question-one' element={<FirstQuestion />} />
                    <Route path='/question-two' element={<FavoritePerson />} />
                    <Route path='/question-three' element={<ChoseMode />} />
                    <Route path='/first-message' element={<SuccessPage />} />
                    <Route path='/question-four' element={<FavoriteDate />} />
                    <Route path='/last-question' element={<DoYouWannaDateMe />} />
                </Routes>
            </Router>
        </CSSTransition>
    )

}

export default Routes;

在每个组件中

export default function StartPage() {

return (
\<div className="card"\>

        <h1 className='card-title'>Está pronta?</h1>
        <form>
          <Link to='/question-one' className='button-submit'
          onClick={()=>{
            setIsEnter()
          }}
          >SIM</Link>
          <input type='button' value='NÂO' onClick={warningMessage}></input>
        </form>
        
      </div>

);

}

StartPage.js 中未定义更改“CSStransition”状态的函数“setIsEnter()”

Answer 1

如果我理解正确的话，我有这个选项。 声明您需要的组件，并将其作为道具传递给所有路线。

function func() {...}

<Route path='/question-one' element={<FirstQuestion func={func} />}