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

【问题标题】：React Router Redirect to component not redirecting反应路由器重定向到组件不重定向
【发布时间】：2020-06-17 07:28:58
【问题描述】：

我需要一个简单的重定向到一个组件，但它不工作不知道为什么。这是代码：

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

我的 HomePage 函数中有一个 useEffect，我没有包含在这个 sn-p 中，它提供 videos 值。它可以工作，当我单击 div 时，它会调用 videoClicked 但 重定向不起作用。 这是我的路由器：

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

当我得到这个工作时，是否可以重定向到组件并通过它传递道具，而不是仅仅在to 标签中传递一个字符串。

【问题讨论】：

那个重定向jsx应该在组件返回的jsx中。

标签： javascript reactjs react-router

【解决方案1】：

你可以有一个新的状态并基于它重定向：

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。

【讨论】：

感谢您的成功！反应路由器是否可以在重定向中向组件发送道具？
@chrus54321 - 是的，这是可能的。我会在几分钟后将其添加到我的答案中。

【解决方案2】：

您可以考虑改用 History HTML5 :) 简单明了

【讨论】：