How to get Routing History to Components not in Route?

Question

I have some components that are not in my route(they are components to load up some part of my site but have nothing to do with navigation).

I however want to have the route history available to these components as some of the do ajax requests and if the user has lost authentication I want to kick them back to my home page.

I have no clue though how to pass the history to components so I could something like

this.props.history.replace(null, "/")

I am using: https://github.com/reactjs/react-router

Edit

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as ReactRouter from "react-router";


class App extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (localStorage.accessToken === undefined) {
      //nextProps.history.replace(null, "/");
    }
  }
  render() {

    return (
      <div>
        <NavigationContainer route={this.props.route} /> // want to pass history into this component so I can use it
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    //states
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    //binding
  }, dispatch);
}



export default connect(mapStateToProps, matchDispatchToProps)(App);

Edit 2

Here is my NaviagationContainer

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { IndexLink, withRouter }  from 'react-router';

    class SideNavContainer extends React.Component {
        componentWillMount() {
            let props = this.props;

            this.props.fetchStorage().then(function (response) {
               //stuff
            }).catch(function (response) {

                // here is where I want to use it
                if(response.response.status == 401) {
                   props.router.replace(null, "/");
                }
            });
        }
        render() {
            return (

               // return
            )
        }
    }

    function mapStateToProps(state) {
        return {
            //reducers
        };
    }

    function matchDispatchToProps(dispatch) {
        return bindActionCreators({
          //bind
        }, dispatch);
    }


    export default withRouter(connect(mapStateToProps, matchDispatchToProps)(SideNavContainer));

my router

ReactDOM.render(
    <Provider store={store}>
      <Router history={hashHistory}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="app" name="app" component={App}></Route>
      </Route>
    </Router>
    </Provider>,
    document.getElementById('root')
);

Seems like when using withRouter. Replace() does not work for me at all. Not in my NaivgationContainer nor in my App Component.

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

Yes, you can use push()/replace()

https://github.com/reactjs/react-router/blob/master/docs/API.md#pushpathorloc

This might give you a better answer: https://stackoverflow.com/a/31079244/5924322

//this HoC gives you the `router` which gives you push()
import { withRouter } from 'react-router'

Edit:

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { withRouter } from "react-router";


class App extends React.Component {
  componentWillUpdate(nextProps) {
    if (localStorage.accessToken === undefined) {
      nextProps.router.replace(null, "/");
    }
  }
  render() {

    return (
      <div>
        <NavigationContainer route={this.props.route} /> // want to pass history into this component so I can use it
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    //states
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    //binding
  }, dispatch);
}



export default withRouter(connect(mapStateToProps, matchDispatchToProps)(App));

edited May 23 '17 at 12:08

Community

1
1

answered Aug 25 '16 at 22:29

goldbullet

602
4
10

How do I use it? I am not clear on how to use it? Do I pass it into the component? – chobo2 Aug 25 '16 at 22:38
I looked at the top post. I don't get with the exporting stuff and how to use the PropTypes – chobo2 Aug 25 '16 at 23:00
Export? You mean applying the HoC? You just wrap your own component with the HoC to get the new component with the router injected as a prop into it. PropTypes is the validation. – goldbullet Aug 25 '16 at 23:10
What is HoC? My knowledge is very limited on react and especially this router component. I posted some code up maybe you can use it to show me an example. – chobo2 Aug 25 '16 at 23:25
Ah, Now I don't have to pass anything into the Navigation Controller correct? I just do context.history? – chobo2 Aug 25 '16 at 23:54
no just `router.replace...` just like how I wrote the example in `componentWillUpdate()`, because hits `withRouter` HoC injects `router` as part of props. – goldbullet Aug 25 '16 at 23:59
I am still having problems I am posting. I tried what you posted but my SideNavContainer did not seem to have it so I added withRoute to it which gave me replace but it seems to not have the info it needs as it errors out. – chobo2 Aug 26 '16 at 16:20
Push seems to work just not replace(). Though I need replace as I don't want them to be able to go back if this case happen. – chobo2 Aug 26 '16 at 16:27
Maybe got it. I guess I need to use withRouter for every component? Also I guess "replace()" has changed as when I do "replace("/")" it works. – chobo2 Aug 26 '16 at 16:37

How to get Routing History to Components not in Route?

1 Answers1