React Router Redirect на компонент, который не перенаправляет

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

У меня есть useEffect в моей функции HomePage, которую я не включил в этот фрагмент, которая дает значения videos. Он работает, и когда я нажимаю на div, он вызывает videoClicked, но перенаправление не работает. Это мой маршрутизатор:

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

Также, когда я получаю эту работу, можно ли перенаправить в компонент и передавать через него реквизиты, а не просто передавать строку в теге to.

Answer 1

вы можете использовать History HTML5 вместо этого :) просто и понятно

Answer 2

У вас может быть новое состояние и перенаправление на основе этого:

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 в компоненте, на который вы перенаправлены.