Answers for "react router dom usehistory push"

0

react js usehistory push and pass props

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

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;


Accessing the passed parameter using useLocation from 'react-router-dom':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};
Posted by: Guest on September-14-2021
0

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;
}
`;
Posted by: Guest on March-23-2021

Code answers related to "react router dom usehistory push"

Code answers related to "Javascript"

Browse Popular Code Answers by Language