Answers for "reactjs useHistory"

usehistory

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>
  );
}

usehistory example

import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();
  return <button onClick={() => history.push('/profile')}>Profile</button>;
}

usehistory, uselocation

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>
  );
}

usehistory

import { useHistory } from "react-router-";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

react router dom usehistory hook

import styled from 'styled-components'
import {useHistory} from 'react-router-dom'
import {useState , useEffect} from 'react'
function Sidebar() {

    const [channel , setChannel ] = useState([])

    const getConnectFirebase = ()=>{
        db.collection('channels').onSnapshot((snapshot)=>{
            setChannel(snapshot.docs.map((doc)=>{
                return {id:doc.id , name:doc.data().name}
            }))
        })
    }

    const history = useHistory();

    const goToChannel = (id)=>{
        if(id)
        {
            history.push(`/channel/${id}`)
        }
    }


    useEffect(()=>{
        getConnectFirebase()
    })

    return (
      <div>
      	<Container>
       		<CreateChannel>
      			{
         			channel.map((items)=>{
         			return (
         				<NamingChannel onClick={goToChannel(items.id)} >
         					# {items.name}
           				</NamingChannel> 
  						   )
						} )
				}
          	</CreateChannel>
          </Container>            
        </div>
    )
}

export default Sidebar

const Container = styled.div`
background:#350d36;
height:95.9vh;
padding-left:35px;
color:violet;
font-family: 'Courier New', Courier, monospace;
`;

const CreateChannel = styled.div`
margin-top:25px;
`;

const NamingChannel = styled.div `
padding-left:5px;
color:violet;
cursor:pointer;
:hover{
    color:whitesmoke;
}
`;

usehistory

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageViews() {
  let location = useLocation();
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
  }, [location]);
}

function App() {
  usePageViews();
  return <Switch>...</Switch>;
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);