使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
当前回答
React路由器v6
我已经有一段时间没有接触过React了,但我想感谢并强调Shimrit Snapir的以下评论:
在React Router 6.0上,<Redirect/>更改为<Navigator/>
React路由器V4
tl:dr;
if (navigate) {
return <Redirect to="/" push={true} />
}
简单而声明性的答案是,需要将<Redirectto={URL}push={boolean}/>与setState()结合使用
push:boolean-如果为true,重定向将向历史中推送一个新条目,而不是替换当前条目。
import { Redirect } from 'react-router'
class FooBar extends React.Component {
state = {
navigate: false
}
render() {
const { navigate } = this.state
// Here is the important part
if (navigate) {
return <Redirect to="/" push={true} />
}
// ^^^^^^^^^^^^^^^^^^^^^^^
return (
<div>
<button onClick={() => this.setState({ navigate: true })}>
Home
</button>
</div>
)
}
}
这里有一个完整的例子。在这里阅读更多信息。
PS.该示例使用ES7+属性初始化器初始化状态。如果你感兴趣的话,也可以看看这里。
其他回答
以下是如何使用带有ES6的react router v2.0.0来实现这一点。react路由器已远离mixin。
import React from 'react';
export default class MyComponent extends React.Component {
navigateToPage = () => {
this.context.router.push('/my-route')
};
render() {
return (
<button onClick={this.navigateToPage}>Go!</button>
);
}
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
}
React路由器V4
如果您使用的是版本4,那么您可以使用我的库(无耻的插件),在那里您只需发送一个操作,一切都正常!
dispatch(navigateTo("/aboutUs"));
脱扣器
试试React Hook Router,“反应路由器的现代替代品”:
import { useRoutes, usePath, A} from "hookrouter";
要回答OP关于通过选择框链接的问题,您可以这样做:
navigate('/about');
更新的答案
我认为React Hook Router是一个很好的入门套件,帮助我学习了路由,但我后来更新了React Router,了解了它的历史和查询参数处理。
import { useLocation, useHistory } from 'react-router-dom';
const Component = (props) => {
const history = useHistory();
// Programmatically navigate
history.push(newUrlString);
}
您可以将要导航到的位置推到历史位置。
要将withRouter与基于类的组件一起使用,请尝试以下操作。不要忘记将导出语句更改为与Router一起使用:
从“react router dom”导入{withRouter}
class YourClass extends React.Component {
yourFunction = () => {
doSomeAsyncAction(() =>
this.props.history.push('/other_location')
)
}
render() {
return (
<div>
<Form onSubmit={ this.yourFunction } />
</div>
)
}
}
export default withRouter(YourClass);
这对我有效,不需要特殊进口:
<input
type="button"
name="back"
id="back"
class="btn btn-primary"
value="Back"
onClick={() => { this.props.history.goBack() }}
/>