CESCO’s answer renders first the component AppShell then one of the components inside Switch. But these components are NOT going to render inside AppShell, they will NOT be children of AppShell. In v4 to wrap components you don’t put anymore your Routes inside another Route, you put your Routes directly inside a component. I.E : … Read more
In the Route component, specify a random key. <Route path={YOURPATH} render={(props) => <YourComp {…props} keyProp={someValue} key={randomGen()}/>} /> when react see a different key, they will trigger rerender.
I would suggest just using React Router directly and not keeping searchState in Redux. React Router will inject URL parameters into your components, and you can use them in mapStateToProps(state, ownProps) to calculate the final props. If you really want to see route changes as actions, you can use react-router-redux for two-way syncing, but it … Read more
Using LinkContainer from react-router-bootstrap is the way to go. The following code should work. import { Route, RouteHandler, Link } from ‘react-router’; import AuthService from ‘../services/AuthService’ import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from ‘react-bootstrap’; import { LinkContainer } from ‘react-router-bootstrap’; /// In the render() method <Nav pullRight> <LinkContainer to=”/home”> <NavItem eventKey={1}>Home</NavItem> </LinkContainer> … Read more
On the Link component you can now add activeClassName or set activeStyle. These allow you to easily add styles to the currently active link. Previously, you could create a custom component that works like a wrapper to Link with the following logic. In a file called nav_link.js import React from ‘react’; import { Link } … Read more
With the newest react router (v4) you can easily do this <BrowserRouter basename=”/calendar”> <Link to=”/today”/> // renders <a href=”/calendar/today”> </BrowserRouter>
The ability to parse query strings was taken out of V4 because there have been requests over the years to support different implementation. With that, the team decided it would be best for users to decide what that implementation looks like. We recommend importing a query string lib. Here’s one that I use const queryString … Read more
Edit: The proper way of doing this the way described in Catalina Astengo’s answer as it uses the real router functionality with just the history/routing state mocked rather than mocking the entire hook. The way I ended up solving it was by mocking the hooks in my tests using jest.mock: // TeamPage.test.js jest.mock(‘react-router-dom’, () => … Read more