[英]Navigate using react-router-dom v6 after performing user action
我大约 15 天前开始学习反应。 以下代码正确添加了帖子,但未重定向到“/”。 我正在使用 react-router-dom v6。
render(){
return <div>
<Routes>
<Route exact path="/" element={
<div>
<Title title={'Arijit - Photowall'}/>
<Photowall posts={this.state.posts} onRemovePhoto={this.removePhoto} />
</div>
} >
</Route>
<Route path="/addPhotos" element={
<AddPhoto onAddPhoto={(addedPost)=>{
this.addPhoto(addedPost)
}}
>
<Navigate to="/" />
</AddPhoto>
}/>
</Routes>
</div>
}
在react-router-dom@6
中,发出命令式导航操作的方法是使用从useNavigate
钩子返回的navigate
函数。 您在片段中共享的代码来自一个类组件,因此您需要创建一个高阶组件以使用useNavigate
挂钩并将navigate
功能作为道具注入。
例子:
import { useNavigate } from 'react-router-dom';
const withNavigate = Component => props => {
const navigate = useNavigate();
return <Component {...props} navigate={navigate} />;
};
使用withNavigate
HOC 装饰代码片段中的组件。
export withNavigate(MyComponent);
从道具访问navigate
功能。
render(){
const { navigate } = this.props;
return (
<div>
<Routes>
<Route
path="/"
element={(
<div>
<Title title={'Arijit - Photowall'}/>
<Photowall posts={this.state.posts} onRemovePhoto={this.removePhoto} />
</div>
)}
/>
<Route
path="/addPhotos"
element={(
<AddPhoto
onAddPhoto={(addedPost) => {
this.addPhoto(addedPost);
navigate("/");
}}
/>
)}
/>
</Routes>
</div>
);
}
路由必须包含在路由器(通常)浏览器路由器中,因此,您应该将它们全部放在该组件中,如下所示:
<BrowserRouter>
<div className="App">
<Box data-testid="app-container">
<Routes>
<Route path={"/"} element={<Home />} />
<Route path={"/edit"} element={<edit/>} />
<Route path={"/whatever"} element={<whatever/>} />
</Routes>
</Box>
</div>
</BrowserRouter>
关于导航,在 react-router-dom v6 中,您必须使用钩子 useNavigate() ,它的工作原理是:
const navigate = useNavigate();
<Button
text={ES.common.back}
onClick={() => navigate("/")}
></Button>
你必须导入
import { useNavigate } from "react-router-dom";
以下是一些您可能会觉得有帮助的文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.