React Router v4.0 - Redirect to a page outside of Router scope

Question

I'd like to be able to navigate to a home page outside of "subpage" defined in a < Router >. Here's 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 a button, I'd like to return to a homepage. Inside the { Search } component, 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 got the same problem, `browserHistory` is not available anymore as import from `react-router` — Felix Hagspiel, Apr 12 '17 at 22:30

Giancarlos · Answer 1 · 2017-03-31T17:14:17.397

1

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 component from 'react-router-dom', some like:

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

edited Mar 31 '17 at 17:14

answered Mar 25 '17 at 16:55

Giancarlos

151
10

is it possible using only react-router-dom ? I don't have react-router installed – ononononon Mar 25 '17 at 17:03
@MariánZekeŠedaj i think no, react-router-dom only export dom elements – Giancarlos Mar 25 '17 at 17:12
browserHistory is not avai anymore in react router v4+ – Sergiu Mar 31 '17 at 12:26
Yep, now you should use – Giancarlos Mar 31 '17 at 17:12

score 0 · Answer 2 · answered Mar 25 '17 at 16:59

0

You can use the Link and IndexLink components from react router

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

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

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

answered Mar 25 '17 at 16:59

Agustin Castro

281
3
11

2

Thank you but I don't want to use Link because the use-case is slightly different, i need to be able to call it programatically – ononononon Mar 25 '17 at 17:02

score 0 · Answer 3 · answered Apr 12 '17 at 22:47

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

export default MainContent;

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

Also check the router v4 docs here

score 0 · Answer 4 · answered Apr 12 '17 at 23:53

When dealing with nested routes in react-router-dom (v4) I tend to structure the paths/components 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" 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>
        )
    }
}

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 component 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!

React Router v4.0 - Redirect to a page outside of Router scope

4 Answers4