我希望能够导航到中定义的“子页面”之外的主页。这是我的组件。

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/

10-09 18:02
查看更多