I'd like to be able to navigate to a home page outside of "subpage" defined in a < Router >. Here's my ponent.

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="/" ponent={Search} />
                        <Route path="/quote" ponent={Quote} />
                    </div>
                </Router>
            </div>
        );
    }
}

export default MainContent; 

By clicking on a button, I'd like to return to a homepage. Inside the { Search } ponent, I'm able to go to a page using this.props.history.push('/quote');

But how can I do it from the MainConent Component?

Thank you

I'd like to be able to navigate to a home page outside of "subpage" defined in a < Router >. Here's my ponent.

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="/" ponent={Search} />
                        <Route path="/quote" ponent={Quote} />
                    </div>
                </Router>
            </div>
        );
    }
}

export default MainContent; 

By clicking on a button, I'd like to return to a homepage. Inside the { Search } ponent, I'm able to go to a page using this.props.history.push('/quote');

But how can I do it from the MainConent Component?

Thank you

• javascript
• reactjs
• react-router

• I got the same problem, browserHistory is not available anymore as import from react-router – Felix Hagspiel Commented Apr 12, 2017 at 22:30

4 Answers 4

You can import the browserHistory and use the 'push' method i think:

import { browserHistory }  from 'react-router;

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

Update react-router 4: Now you need to use Redirect ponent from 'react-router-dom', some like:

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

You can use the Link and IndexLink ponents from react router

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

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

Style this how you please or bine it with a button and you could use this approach. Cheers! Hope it helped

First you should create a history and pass it to the <Router>.

In your example:

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="/" ponent={Search} />
                        <Route path="/quote" ponent={Quote} />
                    </div>
                </Router>
            </div>
        );
    }
}

export default MainContent; 

You can then also call history.replace('/myfancypage') inside your main ponent as well as from anywhere where you do import {history} from 'path-to-maincontent-file.js'.

Also check the router v4 docs here

When dealing with nested routes in react-router-dom (v4) I tend to structure the paths/ponents as such:

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" ponent={Quote} />
                    <Route path="/otherQuote" ponent={OtherQuote} />
                </div>
            </div>
        );
    }
}


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

Subpage will be rendered each time, as it will always match the '/' route, but the remaining content of the page is based on the path. There is no need for nesting the Router ponent within the subpage, and keeping the routes nested in this way, and not within multiple routers, will pass the history through props, and allow you to push to history through props.

Hope this helps and good luck!