Show activity on this post. Show activity on this post. import {useHistory } from "react-router-dom"; const TheContext = React. createContext(null); const App = () => { const history = useHistory(); <TheContext.
In the detail page, there is go to the list button and when user clicks it, page will be moved to the list page again and I will use history. back() here. So far, it is easy to make it using react-router.
React Router uses the history package, which builds on the browser history API to provide an interface to which we can use easily in React apps. location - (object) The current location. May have the following properties: pathname - (string) The path of the URL.
In react router v4, we can access the query param data from a URL using the props. location.search property. In class-based components, you can access it like this.
You just need to have a module that exports a history
object. Then you would import that object throughout your project.
// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory({
/* pass a configuration object here if needed */
})
Then, instead of using one of the built-in routers, you would use the <Router>
component.
// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'
ReactDOM.render((
<Router history={history}>
<App />
</Router>
), holder)
// some-other-file.js
import history from './history'
history.push('/go-here')
This works! https://reacttraining.com/react-router/web/api/withRouter
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
render () {
this.props.history;
}
}
withRouter(MyComponent);
Basing on this answer if you need history object only in order to navigate to other component:
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>
);
}
Similiary to accepted answer what you could do is use react
and react-router
itself to provide you history
object which you can scope in a file and then export.
history.js
import React from 'react';
import { withRouter } from 'react-router';
// variable which will point to react-router history
let globalHistory = null;
// component which we will mount on top of the app
class Spy extends React.Component {
constructor(props) {
super(props)
globalHistory = props.history;
}
componentDidUpdate() {
globalHistory = this.props.history;
}
render(){
return null;
}
}
export const GlobalHistory = withRouter(Spy);
// export react-router history
export default function getHistory() {
return globalHistory;
}
You later then import Component and mount to initialize history variable:
import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';
function render() {
ReactDOM.render(
<BrowserRouter>
<div>
<GlobalHistory />
//.....
</div>
</BrowserRouter>
document.getElementById('app'),
);
}
And then you can just import in your app when it has been mounted:
import getHistory from './history';
export const goToPage = () => (dispatch) => {
dispatch({ type: GO_TO_SUCCESS_PAGE });
getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};
I even made and npm package that does just that.
If you are using redux and redux-thunk the best solution will be using react-router-redux
// then, in redux actions for example
import { push } from 'react-router-redux'
dispatch(push('/some/path'))
It's important to see the docs to do some configurations.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With