React Hooks with React Router v4 - how do I redirect to another route?

后端 未结 3 1714
鱼传尺愫
鱼传尺愫 2021-02-13 05:30

I have a simple react hooks application - a list of Todos - with react router v4

On the List of Todos, when a Todo is clicked I need to:

  1. Dispatch the curre
3条回答
  •  遇见更好的自我
    2021-02-13 05:35

    Your problem is related to Programmatically navigating using react-router-v4 instead of with hooks,

    In react-router-v4, you would get history from props if the Todos component is rendered as a child or Route or from an ancestor that is render form Route and it passed the Router props to it. However it is not receiving Router props, you can use withRouter HOC from react-router to get the router props and call props.history.push(destUrlEdit)

    import React, {useState, useContext, useEffect} from 'react';
    import TodosContext from './context'
    import { withRouter } from 'react-router-dom';
    
    function Todos(props){   
        const [todo, setTodo] = useState("")
        const {state, dispatch} = useContext(TodosContext)
        useEffect(()=>{
            if(state.currentTodo.text){
                setTodo(state.currentTodo.text)
            } else {
                setTodo("")
            }
            dispatch({
                type: "GET_TODOS",
                payload: state.todos
            })
        }, [state.currentTodo.id])
    
        const editRow = event =>{
            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
            props.history.push(destUrlEdit);
        }
        return(
            

    List of ToDos

    {title}

      {state.todos.map(todo => (
    • {todo.text}  
    • ))}
    ) } export default withRouter(Todos);

提交回复
热议问题