反应路由器重定向到组件不重定向

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 :) 简单明了