usehistory example

1import { useHistory } from 'react-router-dom';
2
3function Home() {
4  const history = useHistory();
5  return <button onClick={() => history.push('/profile')}>Profile</button>;
6}

1import { useHistory } from "react-router-";
2
3function HomeButton() {
4  let history = useHistory();
5
6  function handleClick() {
7    history.push("/home");
8  }
9
10  return (
11    <button type="button" onClick={handleClick}>
12      Go home
13    </button>
14  );
15}
16

1import styled from 'styled-components'
2import {useHistory} from 'react-router-dom'
3import {useState , useEffect} from 'react'
4function Sidebar() {
5
6    const [channel , setChannel ] = useState([])
7
8    const getConnectFirebase = ()=>{
9        db.collection('channels').onSnapshot((snapshot)=>{
10            setChannel(snapshot.docs.map((doc)=>{
11                return {id:doc.id , name:doc.data().name}
12            }))
13        })
14    }
15
16    const history = useHistory();
17
18    const goToChannel = (id)=>{
19        if(id)
20        {
21            history.push(`/channel/${id}`)
22        }
23    }
24
25
26    useEffect(()=>{
27        getConnectFirebase()
28    })
29
30    return (
31      <div>
32      	<Container>
33       		<CreateChannel>
34      			{
35         			channel.map((items)=>{
36         			return (
37         				<NamingChannel onClick={goToChannel(items.id)} >
38         					# {items.name}
39           				</NamingChannel> 
40  						   )
41						} )
42				}
43          	</CreateChannel>
44          </Container>            
45        </div>
46    )
47}
48
49export default Sidebar
50
51const Container = styled.div`
52background:#350d36;
53height:95.9vh;
54padding-left:35px;
55color:violet;
56font-family: 'Courier New', Courier, monospace;
57`;
58
59const CreateChannel = styled.div`
60margin-top:25px;
61`;
62
63const NamingChannel = styled.div `
64padding-left:5px;
65color:violet;
66cursor:pointer;
67:hover{
68    color:whitesmoke;
69}
70`;