javascript - 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>)}
  )
}