I would go through your components and make sure you have only one <Router> … </Router>. Also — make sure you have a <Router>…</Router> There may be cases when you’d use more than one, but if you accidentally have nested routers (because you were hacking quickly and forgot to remove one when you were moving … Read more
You can wrap your component in the test with the StaticRouter to get the router context into your component: import React from ‘react’; import renderer from ‘react-test-renderer’; import { Link } from ‘react-router-dom’; import { StaticRouter } from ‘react-router’ test(‘Link matches snapshot’, () => { const component = renderer.create( <StaticRouter location=”someLocation” context={context}> <Link to=”#” /> … Read more
You need to use different history provider for server side rendering because you don’t have a real DOM (and browser’s history) on server. So replacing BrowserRouter with Router and an alternate history provider in your app.js can resolve the issue. Also you don’t have to use two wrappers. You are using BrowserRouter twice, in app.js … Read more
react-router v4 also provides a way to share history via the history package, namely createBrowserHistory() function. The important part is to make sure that the same history object is shared across your app. To do that you can take advantage of the fact that node modules are singletons. Create a file called history.js in your … Read more
Best pattern I have found so far. // main app <div> // not setting a path prop, makes this always render <Route component={AppShell}/> <Switch> <Route exact path=”https://stackoverflow.com/” component={Login}/> <Route path=”/dashboard” component={AsyncDashboard(userAgent)}/> <Route component={NoMatch}/> </Switch> </div> I can just keep nesting this inside a component and everything works nice including hmr(If using webpack, dont forget to … Read more
You can also use the: import { withRouter } from ‘react-router-dom’; And then on your export default, you do like this: export default withRouter(connect(mapStateToProps, {})(Layout)); Because when you have an export connect, you need to tell that that component will be using the router.
I think the issue is with binding: constructor(props){ super(props); this.goBack = this.goBack.bind(this); // i think you are missing this } goBack(){ this.props.history.goBack(); } ….. <button onClick={this.goBack}>Go Back</button> As I have assumed before you posted the code: constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.handleBack = this.handleBack.bind(this); // you are missing this line }
This behaviour happens because have an exact attribute mentioned on the parent route <Route exact path=”https://stackoverflow.com/” component={Landing} /> So what happens is that react-router sees a path /test to match and then tries to match it starting from the top level. and it sees two routes one is exactly / and other is /contribute. None … Read more
React router from v4 onwards no longer gives you the query params in its location object. The reason being There are a number of popular packages that do query string parsing/stringifying slightly differently, and each of these differences might be the “correct” way for some users and “incorrect” for others. If React Router picked the … Read more
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