My Coding Reference

Redirect in React Router Redirect can use to redirect page to given path        when page doesn't exsist , it can be used instead of        showing 404 error page, so when user enter in wrong url        it will redirect to certain given path import   React   from   'react' import  { Route  ,  Switch ,  Redirect }  from   "react-router-dom" import   Contact   from   './RContact' import   About   from   './RAbout' import   ErrorMsg   from   './ErrorMsg' import   Navbar   from   './Navbar' import   User   from   './UseParams' import   Search   from   './RSearch' ; let   Service ...

useHistory in React Router import   React   from   'react' ; import  { useHistory }  from   'react-router-dom' ; let   User  = ()  => {         var   history  =  useHistory ();      return (          < >    <h1> user page </h1>     < button   onClick = { () => history . goBack () } > GO Back </ button >   < br />< br />< hr />     < button   onClick = { () => history . push ( '/' ) } > Hompage </ button >          </ >     ) } export   default   User ; useHistory gives the information about pages with visited , so that we can go back to previous  page using goBack()   function and can visit to any page we want using pu...

         useLocation in React Router import   React   from   'react' ; import  { useParams ,  useLocation }  from   'react-router-dom' ; let   User  = ()  => {      var  { fname ,  lname } =  useParams ();  // variable name must be same as you metion in route path                                      // we have to get it as object in {}        var   location  =  useLocation ();      // console.log(location);      return (          < >    ...

              useParams in React Router 1 st create Link user :  < NavLink    activeClassName = "active_class"   to = "/user" >  User  </ NavLink > 2nd metion link in route : < Switch >      { /* To Pass The Props to bellow about component */ }        < Route   exact   path = "/"   component = { () => < About   text = "About US"   /> } />        { /* We can also use render in place of component like bellow */ }        < Route   exact   path = "/contact"   render = { Contact } />          < Route   path = "/contact/service"   component = { Service } />     ...

Router in React To use router concept in React , first you have to  perform following steps. 1st : TO install Router  $ npm install  --save react-router-dom 2nd :  import following in index.js file import  { BrowserRouter }  from   "react-router-dom" 3nd :  Use of BrowserRouter in index.js file ReactDOM . render (    < BrowserRouter > < App /> </ BrowserRouter >   ,    document . getElementById ( 'root' ) ); 4th : Router.jsx , where we give path of pages import   React   from   'react' import  { Route  ,  Switch }  from   "react-router-dom" import   Contact   from   './RContact' import   About   from   './RAbout' import   ErrorMsg   from   './ErrorMsg' import   Navbar   from   './Navbar' let   Service  = () => {    return ( < >     < h1 > This...

React API call using  axios and useEffect Axios will fetch the data from react api  syntax :  asynx function functionName(){ const  res = await axios.get("url"); } example :   React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS import   React , {  useState ,  useEffect  }  from   'react' ; import   Axios   from   'axios' ; let   AxiosPokemon  = ()  =>  {      let  [ num , setNum ] =  useState ();      let  [ name , setName ] =  useState ( "" );      let  [ move , setMove ] =  useState ();      useEffect (() => {          async   function   getData (){              const   res  =  await   Axios . get ( `...

Changing the Title  of Website on Button Click in React Hook filename : ChgTitle.jsx import   React , {  useState ,  useEffect  }  from   'react' ; let   ChgTitle  = ()  =>  {      let  [ num ,  setNum ] =  useState ( 0 );      useEffect (() => {          document . title  =  `Clicked me 😎 ${ num }` ;     })      return  (          < >              < center >                  < br   />< br   />                  < button   onClick = { ()  => ...