有谁能告诉我react中redirect是如何工作的?
我来自Angular背景,正在学习React。
我有一个小应用程序,我想在单击按钮时将用户重定向到profile
组件。
这是一个非常基本的要求,但是没有适当的文档可用(或者我找不到)。
任何帮助都将不胜感激。
下面是我的代码:
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
<BrowserRouter>
<Switch>
<Route path="/" exact render={props => <Index {...props} />} />
<Route path="/login-page" exact render={props => <Login {...props} />} />
<Route path="/profile-page" exact render={props => <Profile {...props} />} />
<Route path="/dashboard" exact render={props => <Dashboard {...props} />} />
<Redirect to="/" />
</Switch>
</BrowserRouter>,
<Button color='primary' onClick={e => this.viewProfile()}>View Profile</Button>
viewProfile = function () {
console.log("clicked");
}
9条答案
按热度按时间ttvkxqim1#
使用react-router-dom中的
Link
组件:还可以查看docs,它们提供了大量示例
sd2nnvve2#
您可以调用
useHistory()
钩子进行导航。如果您使用的是类组件,则可以将其 Package 为
withRouter()
以访问同一个history
对象。vjrehmav3#
React Router附带了一个
Link
组件,可以用于此目的,只需导入它,在to
属性中设置目的地,然后用它 Package 您的Button
即可:看看React路由器docs,他们有很多有用的信息!
gblwokeq4#
添加这个解决了我的问题。
感谢“tarzenchugh”和“好撒玛利亚人"的回复
jjjwad0x5#
当你第一次学习一个新的框架时,命名法很重要:)
严格来说redirect将
渲染
<Redirect>
将导航到新位置。新位置将覆盖历史堆栈中的当前位置您需要的是 * 导航 * 到个人资料页面。有两种方法可以实现这一点
1.通过JSX Link。
1.以编程方式使用history对象。
lztngnrs6#
hk8txs487#
使用
react-router-dom
中的useNavigate
钩子,这是一个简单的解决方案cig3rfwq8#
这里你可以使用
withRouter
HOC来重定向。参考:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md
fkaflof69#
这样做:-