usehistory in functional component react code example

Example 1: usehistory example

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

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

Example 2: react router dom useparams

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

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

Example 3: 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;
}
`;