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

我的HomePage函数中有一个useEffect，我没有包含在提供videos值的代码段中。它有效，当我单击div时，它调用videoClicked，但重定向无效。 这是我的路由器：

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

此外，当我开始工作时，可以重定向到组件并通过它传递道具，而不仅仅是在to标记中传递字符串。

Answer 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。

Answer 2

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

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

2 个答案: