React Hooks with React Router v4 - how do I redirect to another route? : <p>I have a simple react hooks application - a list of Todos - with react router v4</p>

<p>On the List of Todos, when a Todo is clicked I need to:</p>

<ol>
<li>Dispatch the current todo in context</li>
<li>Redirect to another route (from /todos to /todos/:id)</li>
</ol>

<p>In the previous React Class based implementation  I could use this.context.history.push to redirect to another route. </p>

<p>How would I handle that using React Hooks in combination of React Router v4 (in code below see my comment in function editRow())?</p>

<p>Code below:</p>

<p>=====index.js=====</p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from "react-router-dom"

import App from './App';

ReactDOM.render(
    &lt;BrowserRouter&gt;
        &lt;App /&gt;
    &lt;/BrowserRouter&gt;, document.getElementById('root'));
</code></pre>

<p>=====main.js=====</p>

<pre><code>import React from 'react'
import { Switch, Route } from 'react-router-dom'
import TodosList from './todoslist'
import TodosEdit from './todosedit'

const Main = () =&gt; (
  &lt;main&gt;
    &lt;Switch&gt;
      &lt;Route exact path="/todos" component={TodosList}/&gt;
      &lt;Route exact path="/todos/:id" component={TodosEdit} /&gt;
    &lt;/Switch&gt;
  &lt;/main&gt;
)

export default Main
</code></pre>

<p>=====app.js=====</p>

<pre><code>import React, {useContext, useReducer} from 'react';
import Main from './main'
import TodosContext from './context'
import todosReducer from './reducer'

const App = () =&gt; {
  const initialState = useContext(TodosContext);
  const [state, dispatch] = useReducer(todosReducer, initialState);
  return (
    &lt;div&gt;
      &lt;TodosContext.Provider value={{state, dispatch}}&gt;
        &lt;Main/&gt;
      &lt;/TodosContext.Provider&gt;
    &lt;/div&gt;
  )
}
export default App;
</code></pre>

<p>=====TodosContext.js=====</p>

<pre><code>import React from 'react'

const TodosContext = React.createContext({
    todos: [
        {id:1, text:'Get Grocery', complete:false},
        {id:2, text:'Excercise', complete:false},
        {id:3, text:'Drink Water', complete:true},
    ],
    currentTodo: {}
})

export default TodosContext
</code></pre>

<p>=====reducer.js=====</p>

<pre><code>import React from 'react'

export default function reducer(state, action){
    switch(action.type){
        case "GET_TODOS":
            return {
                ...state,
                todos: action.payload
            }
        case "SET_CURRENT_TODO":
                   return {
                       ...state,
                       currentTodo: action.payload
            }
        default: 
            return state
    }
}
</code></pre>

<p>=====Todos.js=====</p>

<pre><code>import React, {useState, useContext, useEffect} from 'react';
import TodosContext from './context'

function Todos(){   
    const [todo, setTodo] = useState("")
    const {state, dispatch} = useContext(TodosContext)
    useEffect(()=&gt;{
        if(state.currentTodo.text){
            setTodo(state.currentTodo.text)
        } else {
            setTodo("")
        }
        dispatch({
            type: "GET_TODOS",
            payload: state.todos
        })
    }, [state.currentTodo.id])

    const editRow = event =&gt;{
        let destUrlEdit = `/todos/${event.id}`

        let obj = {}
        obj.id = event.id
        obj.text = event.text

        dispatch({type:"SET_CURRENT_TODO", payload: obj})

        //after dispatch I would like to redirect to another route to do the actual edit
        //destUrlEdit
    }
    return(
        &lt;div&gt;
            &lt;h1&gt;List of ToDos&lt;/h1&gt;
            &lt;h4&gt;{title}&lt;/h4&gt;
            &lt;ul&gt;
                {state.todos.map(todo =&gt; (
                    &lt;li key={todo.id}&gt;{todo.text} &amp;nbsp;
                        &lt;button onClick={()=&gt;{
                            editRow(todo)}}&gt;
                        &lt;/button&gt;
                    &lt;/li&gt;
                ))}
            &lt;/ul&gt;
        &lt;/div&gt;
    )
}

export default Todos;
</code></pre>
