react-router-v4

I'm using jest to test a component with a <Link> from react-router v4. I get a warning that <Link /> requires the context from a react-router <Router /> component. How can I mock or provide a router context in my test? (Basically how do I resolve this warning?) Link.test.js import React from 'react'; import renderer from 'react-test-renderer'; import { Link } from 'react-router-dom'; test('Link matches snapshot', () => { const component = renderer.create( <Link to="#" /> ); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); The warning when the test is run: Warning: Failed

Trying to figure out how can I go back to the previous page. I am using [react-router-v4][1] This is the code I have configured in my first landing page: <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> In order to forward to subsequent pages, I simply do: this.props.history.push('/Page2'); However, how can I go back to previous page? Tried few things like mentioned below but no luck: 1. this.props.history

I have to implement some business logic depending on browsing history. What I want to do is something like this: reactRouter.onUrlChange(url => { this.history.push(url); }); Is there any way to receive a callback from react-router when the URL gets updated? You can make use of history.listen() function when trying to detect the route change. Considering you are using react-router v4 , wrap your component with withRouter HOC to get access to the history prop. history.listen() returns an unlisten function. You'd use this to unregister from listening. You can configure your routes like index.js

I have a couple of buttons that acts as routes. Everytime the route is changed, I want to make sure the button that is active changes. Is there a way to listen to route changes in react router v4? I use withRouter to get the location prop. When the component is updated because of a new route, I check if the value changed: @withRouter class App extends React.Component { static propTypes = { location: React.PropTypes.object.isRequired } // ... componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { this.onRouteChanged(); } } onRouteChanged() { console.log("ROUTE CHANGED

The only working method that I found to work this out without using react-router-redux to route from action creator async action completion is by passing the history prop from the component to action creator and doing: history.push('routename'); Since BrowserRouter ignores the history prop passed to it thus we cannot use custom history objects with browserhistory. What is the best possible way to work this out? Instead of using BrowserRouter you could use the Router with custom history like import { Router } from 'react-router' import createBrowserHistory from 'history/createBrowserHistory'

I am using the following simple nav code <Router> <Switch> <Route exact path='/dashboard' component={Dashboard} /> <Route path='/dashboard/accounts' component={AccountPage} /> </Switch> </Router> <NavLink exact to={'/dashboard'} disabled={this.props.item.disabled} activeClassName='active'> <NavLink exact to={'/dashboard/accounts'} disabled={this.props.item.disabled} activeClassName='active'> The URL changes but the view does not. It does however change when I refresh the page or manually go to that URL. You can also use the: import { withRouter } from 'react-router-dom'; And then on your