react-router-v4 - w3toppers.com

Use history.push in action creator with react-router-v4?

Instead of using BrowserRouter you could use the Router with custom history like import { Router } from ‘react-router’ import createBrowserHistory from ‘history/createBrowserHistory’ export const history = createBrowserHistory() <Router history={history}> <App/> </Router> in which case your history.push() will work. With BrowserRouter history.push doesn’t work because Creating a new browserHistory won’t work because <BrowserRouter> creates its … Read more

onEnter not called in React-Router

onEnter no longer exists on react-router-4. You should use <Route render={ … } /> to get your desired functionality. I believe Redirect example has your specific scenario. I modified it below to match yours. <Route exact path=”/home” render={() => ( isLoggedIn() ? ( <Redirect to=”/front”/> ) : ( <Home /> ) )}/>

Nested Routes not rendering with React Router v4

The reason is very obvious. for your route in main.js, you have specified the Route path of Public component with exact exact path=”https://stackoverflow.com/” and then in the Public component you are matching for the other Routes. So if the route path is /signup, at first the path is not exact so Public component is not … Read more

How to get query parameters in react-router v4

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

Simple Conditional Routing in Reactjs

To help answer your question, I think you may need to also ask how that route should get blocked. Looking through the example above, you don’t yet have a mechanism that helps answer the question of “should I be able to visit this page”. That might come from state, redux, or some other means of … Read more

React doesn’t reload component data on route param change or query change

Along with componentDidMount, You also need to implement the componentWillReceiveProps or use getDerivedStateFromProps(from v16.3.0 onwards) in Products page since the same component is re-rendered with updated params and not re-mounted when you change the route params, this is because params are passed as props to the component and on props change, React components re-render and … Read more

Detect Route Change with react-router

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 ReactDOM.render( <BrowserRouter> <AppContainer> … Read more

React Router v4 – How to get current route?

In the 5.1 release of react-router there is a hook called useLocation, which returns the current location object. This might useful any time you need to know the current URL. import { useLocation } from ‘react-router-dom’ function HeaderView() { const location = useLocation(); console.log(location.pathname); return <span>Path : {location.pathname}</span> }

Nesting Routes in react-router v4

IndexRoute and browserHistory are not available in the latest version, also Routes do not accept children Routes with v4, Instead, you can specify Routes within the component Itself import { Switch, BrowserRouter as Router, Route, Redirect } from ‘react-router-dom’ render(( <Router> <Switch> <Route exact path=”https://stackoverflow.com/” component={ Main }/> <Redirect from=’*’ to=”https://stackoverflow.com/” /> </Switch> </Router> ), … Read more

Programmatically navigating in React-Router v4

You are using react-router v4, so you need to use withRouter with your component to access the history object’s properties, then use history.push to change the route dynamically. withRouter: You can get access to the history object’s properties and the closest ‘s match via the withRouter higher-order component. withRouter will re-render its component every time … Read more