How to get Routing History to Components not in Route? - reactjs

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.

Answer 1

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));