Revisions to Programmatically navigate using react router V4

Removed incorrect npm flag and improved a confusing sentence to make sense.

Source Link

edit approved Oct 12, 2018 at 13:56

basse

1.4k
1
25
41

npm i -S react-router-dom

If you are using redux or mobx as your state management library in your application, you may have come across issues with components that should be location-aware thatbut are not re-rendered after triggering an URL update

npm i -S react-router-dom

If you are using redux or mobx as your state management library in your application, you may have come across issues with components location-aware that are not re-rendered after triggering an URL update

npm i react-router-dom

If you are using redux or mobx as your state management library in your application, you may have come across issues with components that should be location-aware but are not re-rendered after triggering an URL update

"shape().isRequired" will return undefined. The isRequired is not needed for shape()

Source Link

edit approved Mar 28, 2018 at 23:54

sramzan

96
8

import { withRouter } from 'react-router-dom'

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }).isRequired,
};

export default withRouter(ButtonToNavigate);

import { withRouter } from 'react-router-dom'

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }).isRequired,
};

export default withRouter(ButtonToNavigate);

import { withRouter } from 'react-router-dom'

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }),
};

export default withRouter(ButtonToNavigate);

Correct order of original name and alias in import statement.

Source Link

edit approved Jul 7, 2017 at 21:22

ArneHugo

6.6k
2
28
51

import { RouterBrowserRouter as BrowserRouterRouter } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

import { Router as BrowserRouter } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

import { BrowserRouter as Router } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

Fixing example number 4. Providing a better example for option number 1

Source Link

edited Mar 25, 2017 at 19:19

rgommezz

14k
2
20
23

Loading

Updating library API, the original answer was based on the alpha.4 version and with the official release, the data contract changed a bit. Incorporating Redirect as another option to achieve the goal; deleted 31 characters in body

Source Link

edited Mar 23, 2017 at 23:26

rgommezz

14k
2
20
23

Loading

Removed reference to alpha versions, now v4 is the latest stable. Provide workaround for common issue when using React Router with libraries like Redux and Mobx

Source Link

edited Mar 21, 2017 at 0:02

rgommezz

14k
2
20
23

Loading

added 1979 characters in body

Source Link

edited Feb 16, 2017 at 22:46

rgommezz

14k
2
20
23

Loading

added 1166 characters in body

Source Link

edited Feb 9, 2017 at 10:35

rgommezz

14k
2
20
23

Loading

Providing a bit more of background, plus more accurate examples

Source Link

edited Feb 9, 2017 at 2:09

rgommezz

14k
2
20
23

Loading

added 8 characters in body

Source Link

edited Feb 8, 2017 at 21:56

rgommezz

14k
2
20
23

Loading

Source Link

answered Feb 8, 2017 at 21:51

rgommezz

14k
2
20
23

Loading

Collectives™ on Stack Overflow

Return to Answer