反應路由器重定向到組件不重定向

Question

我需要一個簡單的重定向到一個組件，但它不知道為什么。 這是代碼：

const HomePage = () => {

const [videos, setVideos] = useState([]);

const videoClicked = (video) => {
    return <Redirect to='/video' />
}

if(videos === []){
    return <div>Loading ...</div>
}

return (
    <div>
        {videos.map(video => (
            <div onClick={() => videoClicked(video)}>
                <VideoThumbnail video={video} />
            </div>
        ))}
    </div>
)
}

export default HomePage

我的主頁 function 中有一個 useEffect，我沒有包含在這個給出videos值的片段中。 它工作，當我 onClick div 它調用videoClicked但重定向不起作用。 這是我的路由器：

  const App = () => {
     return (
        <HashRouter>
          <Switch>
            <Route exact path="/video" component={VideoPage} />
            <Route path="/" component={HomePage} />
          </Switch>
        </HashRouter>
      )
    }

此外，當我完成這項工作時，是否可以重定向到組件並通過它傳遞道具，而不僅僅是在to標記中傳遞一個字符串。

Answer 1

您可以擁有一個新的 state 並基於此重定向：

const HomePage = () => {

    const [videos, setVideos] = useState([]);
    const [clicked, setClicked] = useState(false);

    const videoClicked = (video) => {
        setClicked(true);
        // return <Redirect to='/video' />
    }

    if (videos === []) {
        return <div>Loading ...</div>
    }

    return (
        clicked ? <Redirect to={{
         pathname: '/video',
         state: { someData: 'test' }
        }} /> : (
            <div>
                {videos.map(video => (
                    <div onClick={() => videoClicked(video)}>
                        <VideoThumbnail video={video} />
                    </div>
                ))}
            </div>
        )
    )
}

export default HomePage

您可以在重定向到的組件中使用props.location.state.someData 。

Answer 2

您可以考慮改用 History HTML5 :) 簡單明了