CopyPastor

Detecting plagiarism made easy.

Score: 2; Reported for: String similarity, Exact paragraph match Open both answers

Possible Plagiarism

Plagiarized on 2021-09-21
by Miana XOX

Original Post

Original - Posted on 2015-06-26
by Felipe Skinner



            
Present in both answers; Present only in the new answer; Present only in the old answer;

> **React-Router 5.1.0+** Answer (using hooks and React >16.8)
You can use the new `useHistory` hook on Functional Components and Programmatically navigate:
import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); // use history.push('/some/path') here };
> **React-Router 4.0.0+** Answer
In 4.0 and above, use the history as a prop of your component.
<!-- language: lang-js -->
class Example extends React.Component { // use `this.props.history.push('/some/path')` here }; NOTE: this.props.history does not exist in the case your component was not rendered by `<Route>`. You should use `<Route path="..." component={YourComponent}/>` to have this.props.history in YourComponent
> **React-Router 3.0.0+** Answer
In 3.0 and above, use the router as a prop of your component.
<!-- language: lang-js -->
class Example extends React.Component { // use `this.props.router.push('/some/path')` here };

> **React-Router 2.4.0+** Answer
In 2.4 and above, use a higher order component to get the router as a prop of your component.
<!-- language: lang-js -->
import { withRouter } from 'react-router';
class Example extends React.Component { // use `this.props.router.push('/some/path')` here };
// Export the decorated class var DecoratedExample = withRouter(Example);
// PropTypes Example.propTypes = { router: React.PropTypes.shape({ push: React.PropTypes.func.isRequired }).isRequired };

> **React-Router 2.0.0+** Answer
This version is backwards compatible with 1.x so there's no need to an Upgrade Guide. Just going through the examples should be good enough.
That said, if you wish to switch to the new pattern, there's a browserHistory module inside the router that you can access with
`import { browserHistory } from 'react-router'`
Now you have access to your browser history, so you can do things like push, replace, etc... Like:
`browserHistory.push('/some/path')`
Further reading: [Histories](https://github.com/reactjs/react-router/blob/latest/docs/guides/Histories.md) and [Navigation](https://github.com/reactjs/react-router/blob/latest/docs/guides/NavigatingOutsideOfComponents.md)
---
> **React-Router 1.x.x** Answer
I will not go into upgrading details. You can read about that in the [Upgrade Guide](https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md)
The main change about the question here is the change from Navigation mixin to History. Now it's using the browser historyAPI to change route so we will use `pushState()` from now on.
Here's an exemple using Mixin:
<!-- language: lang-js -->
var Example = React.createClass({ mixins: [ History ], navigateToHelpPage () { this.history.pushState(null, `/help`); } }) Note that this `History` comes from [rackt/history](https://github.com/rackt/history) project. Not from React-Router itself.
If you don't want to use Mixin for some reason (maybe because of ES6 class), then you can access the history that you get from the router from `this.props.history`. It will be only accessible for the components rendered by your Router. So, if you want to use it in any child components it needs to be passed down as an attribute via `props`.
You can read more about the new release at their [1.0.x documentation](https://github.com/rackt/react-router/tree/1.0.x/docs)
Here is [a help page specifically about navigating outside your component](https://github.com/rackt/react-router/blob/1.0.x/docs/guides/advanced/NavigatingOutsideOfComponents.md)
It recommends grabbing a reference `history = createHistory()` and calling `replaceState` on that.

> **React-Router 0.13.x** Answer

I got into the same problem and could only find the solution with the Navigation mixin that comes with react-router.
Here's how I did it
<!-- language: lang-js -->
import React from 'react'; import {Navigation} from 'react-router'; let Authentication = React.createClass({ mixins: [Navigation],
handleClick(e) { e.preventDefault(); this.transitionTo('/'); },
render(){ return (<div onClick={this.handleClick}>Click me!</div>); } });
I was able to call `transitionTo()` without the need to access `.context`
Or you could try the fancy ES6 `class`
<!-- language: lang-js -->
import React from 'react'; export default class Authentication extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }
handleClick(e) { e.preventDefault(); this.context.router.transitionTo('/'); }
render(){ return (<div onClick={this.handleClick}>Click me!</div>); } }
Authentication.contextTypes = { router: React.PropTypes.func.isRequired };
> **React-Router-Redux** > > **Note:** if you're using Redux, there is another project called > [React-Router-Redux](https://github.com/reactjs/react-router-redux) that gives you > redux bindings for ReactRouter, using somewhat the same approach that > [React-Redux](https://github.com/rackt/react-redux) does
React-Router-Redux has a few methods available that allow for simple navigating from inside action creators. These can be particularly useful for people that have existing architecture in React Native, and they wish to utilize the same patterns in React Web with minimal boilerplate overhead.
Explore the following methods:
- `push(location)` - `replace(location)` - `go(number)` - `goBack()` - `goForward()`
Here is an example usage, with [Redux-Thunk](https://www.npmjs.com/package/redux-thunk):
**./actioncreators.js**
<!-- language: lang-js -->
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
**./viewcomponent.js**
<!-- language: lang-js -->
<button disabled={submitting} className="cancel_button" onClick={(e) => { e.preventDefault() this.props.onBackPress() }} > CANCEL </button>
> **React-Router 5.1.0+** Answer (using hooks and React >16.8)
You can use the new `useHistory` hook on Functional Components and Programmatically navigate:
import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); // use history.push('/some/path') here };
> **React-Router 4.0.0+** Answer
In 4.0 and above, use the history as a prop of your component.
<!-- language: lang-js -->
class Example extends React.Component { // use `this.props.history.push('/some/path')` here }; NOTE: this.props.history does not exist in the case your component was not rendered by `<Route>`. You should use `<Route path="..." component={YourComponent}/>` to have this.props.history in YourComponent
> **React-Router 3.0.0+** Answer
In 3.0 and above, use the router as a prop of your component.
<!-- language: lang-js -->
class Example extends React.Component { // use `this.props.router.push('/some/path')` here };

> **React-Router 2.4.0+** Answer
In 2.4 and above, use a higher order component to get the router as a prop of your component.
<!-- language: lang-js -->
import { withRouter } from 'react-router';
class Example extends React.Component { // use `this.props.router.push('/some/path')` here };
// Export the decorated class var DecoratedExample = withRouter(Example);
// PropTypes Example.propTypes = { router: React.PropTypes.shape({ push: React.PropTypes.func.isRequired }).isRequired };

> **React-Router 2.0.0+** Answer
This version is backwards compatible with 1.x so there's no need to an Upgrade Guide. Just going through the examples should be good enough.
That said, if you wish to switch to the new pattern, there's a browserHistory module inside the router that you can access with
`import { browserHistory } from 'react-router'`
Now you have access to your browser history, so you can do things like push, replace, etc... Like:
`browserHistory.push('/some/path')`
Further reading: [Histories](https://github.com/reactjs/react-router/blob/latest/docs/guides/Histories.md) and [Navigation](https://github.com/reactjs/react-router/blob/latest/docs/guides/NavigatingOutsideOfComponents.md)
---
> **React-Router 1.x.x** Answer
I will not go into upgrading details. You can read about that in the [Upgrade Guide](https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md)
The main change about the question here is the change from Navigation mixin to History. Now it's using the browser historyAPI to change route so we will use `pushState()` from now on.
Here's an exemple using Mixin:
<!-- language: lang-js -->
var Example = React.createClass({ mixins: [ History ], navigateToHelpPage () { this.history.pushState(null, `/help`); } }) Note that this `History` comes from [rackt/history](https://github.com/rackt/history) project. Not from React-Router itself.
If you don't want to use Mixin for some reason (maybe because of ES6 class), then you can access the history that you get from the router from `this.props.history`. It will be only accessible for the components rendered by your Router. So, if you want to use it in any child components it needs to be passed down as an attribute via `props`.
You can read more about the new release at their [1.0.x documentation](https://github.com/rackt/react-router/tree/1.0.x/docs)
Here is [a help page specifically about navigating outside your component](https://github.com/rackt/react-router/blob/1.0.x/docs/guides/advanced/NavigatingOutsideOfComponents.md)
It recommends grabbing a reference `history = createHistory()` and calling `replaceState` on that.

> **React-Router 0.13.x** Answer

I got into the same problem and could only find the solution with the Navigation mixin that comes with react-router.
Here's how I did it
<!-- language: lang-js -->
import React from 'react'; import {Navigation} from 'react-router'; let Authentication = React.createClass({ mixins: [Navigation],
handleClick(e) { e.preventDefault(); this.transitionTo('/'); },
render(){ return (<div onClick={this.handleClick}>Click me!</div>); } });
I was able to call `transitionTo()` without the need to access `.context`
Or you could try the fancy ES6 `class`
<!-- language: lang-js -->
import React from 'react'; export default class Authentication extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }
handleClick(e) { e.preventDefault(); this.context.router.transitionTo('/'); }
render(){ return (<div onClick={this.handleClick}>Click me!</div>); } }
Authentication.contextTypes = { router: React.PropTypes.func.isRequired };
> **React-Router-Redux** > > **Note:** if you're using Redux, there is another project called > [React-Router-Redux](https://github.com/reactjs/react-router-redux) that gives you > redux bindings for ReactRouter, using somewhat the same approach that > [React-Redux](https://github.com/rackt/react-redux) does
React-Router-Redux has a few methods available that allow for simple navigating from inside action creators. These can be particularly useful for people that have existing architecture in React Native, and they wish to utilize the same patterns in React Web with minimal boilerplate overhead.
Explore the following methods:
- `push(location)` - `replace(location)` - `go(number)` - `goBack()` - `goForward()`
Here is an example usage, with [Redux-Thunk](https://www.npmjs.com/package/redux-thunk):
**./actioncreators.js**
<!-- language: lang-js -->
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
**./viewcomponent.js**
<!-- language: lang-js -->
<button disabled={submitting} className="cancel_button" onClick={(e) => { e.preventDefault() this.props.onBackPress() }} > CANCEL </button>

        
Present in both answers; Present only in the new answer; Present only in the old answer;