useHistory in react native router code example

Example 1: usehistory

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

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

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

  return (
    
  );
}

Example 2: 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 (
      
{ channel.map((items)=>{ return ( # {items.name} ) } ) }
) } 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; } `;

Tags:

Misc Example