React Router v4.0 - 重定向到路由器范围之外的页面

Question

我希望能够导航到<Router>中定义的"子页面"之外的主页.这是我的组件.

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; 

点击按钮,我想回到主页.在{Search}组件中,我可以使用转到页面this.props.history.push('/quote');

但是我怎样才能从MainConent组件中做到这一点？

谢谢

Answer 1

您可以导入 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>)}
  )
}