Cara menggunakan THIS.PROPS.HISTORY.PUSH pada JavaScript

To answer your question, you should try the React Router v5.1.0 with hooks. An update for a new useHistory hook has been introduced in the React Router >5.1.0 if what you are using is React>16.8.0 along with the components that are functional, then please use the given lines of code:-

import { useHistory } from "react-router-dom"; function HomeButton() { const history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); }

When coming to the use of the React Router v4, there are about three various approaches which can be implemented into your routine of programming within components such as using the withRouter higher order, using the composition and rendering a <Route> and finally to use the context. The React Router is nothing but a wrapper which is around the history library in which the history handles the interaction with the internet's window.history using the hash histories. Over this, it also provides the storage history which helps environments with an absence of global history. For testing units with Node and react-native which is used for mobile application development are areas where this is beneficial. Push and Replace are the methods for navigation of a history instance. If the history of the visited locations array is taken into consideration, then the array will have a new location added with the help of push and replace will replace the current location in the array with a new one. Normally, while navigation, the push button will be used. The <BrowserRouter>, <HashRouter>, and <MemoryRouter> components will make a browser, hash and storage instances for you in React Router v4. The router also makes methods of the history instance which is related to the router available which you are using under the router object.  In other words, by using the withRouter higher-order component, it will inject the history object as a part of the component which enables access to you and the push and replace methods without having to deal with the context. Refer below for the example:-
 

import { withRouter } from 'react-router-dom' // this also works with react-router-native const Button = withRouter(({ history }) => ( <button type='button' onClick={() = > { history.push('/new-location') }} > Click Me! </button> ) )

Another method used is to use the composition and render a <Route> as the <Route> component is not only for the purpose of simply matching locations. You can also render a route without a path and it will always match the current location. The <Route> component passes the same props as withRouter, so you will be able to access the history methods through the history prop using the following code:-
 

import { Route } from 'react-router-dom' const Button = () => ( <Route render={({ history}) => ( <button type='button' onClick={() = > { history.push('/new-location') }} > Click Me! </button> ) } /> )Finally, using the context* model as the React’s Context API is more stable as compared to v16 as displayed below:- const Button = (props, context) => ( <button type='button' onClick={() => { // context.history.push === history.push context.history.push('/new-location') }} > Click Me! </button> ) // you need to specify the context type so that it // is available within the component Button.contextTypes = { history: React.PropTypes.shape({ push: React.PropTypes.func.isRequired }) }

Questions : this.props.history is undefined react-router-dom

2022-09-10T22:29:13+00:00 2022-09-10T22:29:13+00:00

776

My App.js

import React, { Component } from 'react'; import './App.css'; import Continue from './components/Continue'; import Login from './components/Login'; import Table from './components/Table'; import Profile from './components/Profile'; import { BrowserRouter,Switch, Route,Redirect } from 'react-router-dom' function loggedIn() { return !!localStorage.getItem('token'); } class App extends Component { render() { return ( <div className="App"> <BrowserRouter > <Switch> <Route exact path = "/" component ={Login}/> <Route exact path = "/continue" component = {() => loggedIn() ? <Continue /> : <Redirect to="/" />} /> <Route exact path = "/home" component={() => loggedIn() ? <Table /> : <Redirect to="/" />} /> <Route exact path = "/profile" component={() => loggedIn() ? <Profile /> : <Redirect to="/" />} /> </Switch> </BrowserRouter> </div> ); } } export default App;

Then from the login form I push to the route anycodings_reactjs /continue

this.props.history.push('/continue');

This happens successfully.

But from Continue when I tried to push to anycodings_reactjs /home same way,

this.props.history.push('/home');

It throws an error

TypeError: this.props.history is undefined

If I remove the loggedIn() make it as login anycodings_reactjs route, then it works.

Need some help to figure out how to send the anycodings_reactjs prop history to other components.

Total Answers 2

24

Answers 1 : of this.props.history is undefined react-router-dom

import React, { Component } from 'react'; import './App.css'; import Continue from './components/Continue'; import Login from './components/Login'; import Table from './components/Table'; import Profile from './components/Profile'; import PropTypes from "prop-types"; import { BrowserRouter,Switch, Route,Redirect } from 'react-router-dom' function loggedIn() { return !!localStorage.getItem('token'); } class App extends Component { render() { const {location} = this.props.location; return ( <div className="App"> <BrowserRouter > <Switch> <Route exact path = "/" component ={Login}/> <Route exact location={location} path = "/continue" component = {() => loggedIn() ? <Continue /> : <Redirect to="/" />} /> <Route exact location={location} path = "/home" component={() => loggedIn() ? <Table /> : <Redirect to="/" />} /> <Route exact location={location} path = "/profile" component={() => loggedIn() ? <Profile /> : <Redirect to="/" />} /> </Switch> </BrowserRouter> </div> ); } } App.propTypes = { location: PropTypes.shape({ pathname: PropTypes.string.isRequired, }).isRequired }; export default App;

if you don't have the prop-types package anycodings_reactjs installed then use

npm install --save prop-types

0

2022-09-10T22:29:13+00:00 2022-09-10T22:29:13+00:00Answer Link

mRahman

5

Answers 2 : of this.props.history is undefined react-router-dom

this.props.history works only if your anycodings_reactjs component is a routed component. See anycodings_reactjs your Login component. It is under the anycodings_reactjs BrowserRouter and as the part of the anycodings_reactjs Route. If you need to redirect to anycodings_reactjs another page (component) as a single anycodings_reactjs page application, you need to use anycodings_reactjs useHistory from react-router-dom / anycodings_reactjs react-router

import { useHistory } from 'react-router-dom'; const LNav = (props) => { let history = useHistory(); return ( <nav className="navbar navbar-expand-lg navbar-dark bg-danger" style={{marginBottom: "5px"}}> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarNav"> <ul className="navbar-nav nav-right" id="app-navbar"> <li className="nav-item"> <a className="nav-link" href="javascript:void(0);" onClick={() => history.push(props.add)}><i className="fa fa-plus"></i> Tambah Data</a> </li> </ul> </div> </nav> ); }; export default LNav;

Look at that component. That is a anycodings_reactjs functional component (stateless anycodings_reactjs component) and according to the hooks anycodings_reactjs rules, it only works with a function anycodings_reactjs component not a class component.

0

2022-09-10T22:29:13+00:00 2022-09-10T22:29:13+00:00Answer Link

jidam