React Handbook

Computed/Memoized variables
- useMemo example
- useMemo and form filtering

Context
- useContext & createContext

Refs
- Focus an input programatically

User events

Form handling

Tables
- Table with data
- Table with data & filter

Custom hooks

Navigation components
- Opening menu
- Tabs

​x
 
import { HashRouter, Switch, Route } from 'react-router-dom'
  
function App () {
  return (
   <HashRouter>
     <Switch>
       <Route
         path="/"
         component={HomePage}
         exact />
       <Route
         path="/admin"
         component={() => <div>Admin page</div>} />
     </Switch>
  </HashRouter>
  )
}
​
function HomePage ({ history }) {
  const handleRedirect = () => {
    history.push('/admin')  
  }
  
  return (
    <button onClick={handleRedirect}>
      Click me to redirect
    </button>
  )
}

We use react-router-dom's history object's push() method to nagivate the user programmatically. Use history.replace() if you wish to rewrite the current router entry, rather than creating a new one.