React Router v4.0 - redirect to a page outside the scope of the router

Question

I would like to be able to go to the home page outside of the "subpage" defined in <Router>. Here is my component.

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; 

By clicking on the button, I want to return to the home page. Inside the {Search} component, I can go to the page usingthis.props.history.push('/quote');

But how can I do this from the MainConent component?

thank

Answer 1

You can import the browser history and use the push method, which I think is:

import { browserHistory }  from 'react-router;

redirectToHomepage(){
    browserHistory.push('/home');
}

4: Redirect "response-router-dom", :

render() {
  render (
    { this.props.authenticated ? 
      (<Redirect to={{ pathname: '/', state: { from: this.props.location }}} />) :
      (<div> Content</div>)}
  )
}

Answer 2

Link IndexLink

var {Link, IndexLink} = require('react-router');

.....
<IndexLink to="/" activeClassName="active">Home Page</IndexLink>
.....

, , , . ! ,

Answer 3

<Router>.

:

import * as React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// new import
import { createBrowserHistory } from 'history';

import { Search } from './page/Search';
import { Quote } from './page/Quote';

export const history = createBrowserHistory();

export class MainContent extends React.Component<{}, {}> {    
    redirectToHomepage(){
        history.replace('/myfancypage');
    }

    render() {
        return (
            <div id="main">
                <button onClick={this.redirectToHomepage}>
                    Back Home
                </button>
                <Route history={history}>
                    <div>
                        <Route exact path="/" component={Search} />
                        <Route path="/quote" component={Quote} />
                    </div>
                </Router>
            </div>
        );
    }
}

export default MainContent; 

history.replace('/myfancypage') , , import {history} from 'path-to-maincontent-file.js'.

v4

Answer 4

response-router-dom (v4) / :

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';


const Quote = () => (
    <h1>Kick butt and chew bubble gum</h1>
);

const OtherQuote = () => (
    <h1>"Be yourself; everyone else is already taken."― Oscar Wilde</h1>
);


export class SubPage extends React.Component {

    redirectToHomepage = () => {
        this.props.history.push('/')
    };


    render() {
        return (
            <div id="main">
                <button onClick={this.redirectToHomepage}>
                    Back Home
                </button>
                <div>
                    <Route path="/quote" component={Quote} />
                    <Route path="/otherQuote" component={OtherQuote} />
                </div>
            </div>
        );
    }
}


export class ReactRouterNesting extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <Route path="/" component={SubPage}/>
                </div>
            </Router>
        )
    }
}

The subpage will be displayed every time, since it will always correspond to the "/" route, but the remaining content of the page is based on the path. There is no need to embed the Router component in a subpage and support routes nested in this way, and not inside multiple routers, it will transmit the history through the details and allow you to advance the history through the details.

Hope this helps and good luck!