我希望能够导航到中定义的“子页面”之外的主页。这是我的组件。
import * as React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Search } from './page/Search';
import { Quote } from './page/Quote';
export class MainContent extends React.Component<{}, {}> {
redirectToHomepage(){
// something.push('/')
}
render() {
return (
<div id="main">
<button onClick={this.redirectToHomepage}>
Back Home
</button>
<Router>
<div>
<Route exact path="/" component={Search} />
<Route path="/quote" component={Quote} />
</div>
</Router>
</div>
);
}
}
export default MainContent;
通过单击按钮,我想返回主页。在{搜索}组件中,我可以使用
this.props.history.push('/quote');
转到页面但是如何从MainConent组件中做到这一点?
谢谢
最佳答案
您可以导入browserHistory并使用我认为的“推”方法:
import { browserHistory } from 'react-router;
redirectToHomepage(){
browserHistory.push('/home');
}
更新react-router 4:
现在,您需要使用来自“react-router-dom”的重定向组件,例如:
render() {
render (
{ this.props.authenticated ?
(<Redirect to={{ pathname: '/', state: { from: this.props.location }}} />) :
(<div> Content</div>)}
)
}
关于javascript - React Router v4.0-重定向到Router作用域之外的页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43019132/