use history react router code example
Example 1: react router dom push
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<Button type="button" onClick={handleClick}>
Go home
</Button>
);
}
Example 2: usematch react router
import React from 'react'
import ReactDOM from 'react-dom'
import { useParams } from 'react-router-dom'
function BlogPost() {
let { slug } = useParams()
}
ReactDOM.render(
<Router>
<div>
<Switch>
{}
<Route path="/posts/:slug">
<BlogPost />
</Route>
</Switch>
</div>
</Router>,
document.getElementById('root')
)
Example 3: use history in react router
import {createBrowserHistory} from 'history';import {useRouterHistory, Router, Route} from 'react-router';const history = useRouterHistory(createBrowserHistory)({ basename: '/basename'});history.listen(location => { history.push('/super/url');});const router = ( <Router history={history}> <Route path=’/' component={App}> … </Route> </Router>);
Example 4: history react router
history.push(
`/product?make=${car_make_id}&model=${car_model_id}&year=${car_generation_id}&series=${car_serie_id}&engine=${car_trim_id}&variant=${car_equipment_id}`
);
Example 5: props history
class Comp extends React.Component {
componentDidUpdate(prevProps) {
const locationChanged =
this.props.location !== prevProps.location;
const locationChanged =
this.props.history.location !== prevProps.history.location;
}
}
<Route component={Comp} />;
Example 6: props history
{
key: 'ac3df4',
pathname: '/somewhere',
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}