Answers for "import usehistory from react-router-dom"

usematch react router

import React from 'react'
import ReactDOM from 'react-dom'
import { useParams } from 'react-router-dom'

function BlogPost() {
  // We can call useParams() here to get the params,
  // or in any child element as well!
  let { slug } = useParams()
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* No weird props here, just use
            regular `children` elements! */}
        <Route path="/posts/:slug">
          <BlogPost />
        </Route>
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)

useHistory react-router-dom

In react-router-dom version 6 
useHistory() is replaced by useNavigate() ;

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')

react router dom current path hook

import { useLocation } from 'react-router-dom'

// Location is, for example: http://localhost:3000/users/new

// Care! MyComponent must be inside Router to work
const MyComponent = () => {
	const location = useLocation()
    
    // location.pathname is '/users/new'
    return <span>Path is: {location.pathname}</span>
}

export default MyComponent

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