web-dev-qa-db-de.com

React Hooks mit React Router v4 - wie leite ich zu einer anderen Route um?

Ich habe eine einfache React Hooks-Anwendung - eine Liste von Todos - mit React Router v4

Wenn auf der Liste der Todos ein Todo angeklickt wird, muss ich:

  1. Versenden Sie die aktuelle Aufgabe im Kontext
  2. Auf eine andere Route umleiten (von/todos nach/todos /: id)

In der vorherigen React Class-basierten Implementierung konnte ich this.context.history.Push verwenden, um zu einer anderen Route umzuleiten.

Wie würde ich damit umgehen, wenn ich React Hooks in Kombination von React Router v4 (siehe Code unten, siehe meinen Kommentar in der Funktion editRow ())?

Code unten:

===== index.js =====

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from "react-router-dom"

import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root'));

===== main.js =====

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

const Main = () => (
  <main>
    <Switch>
      <Route exact path="/todos" component={TodosList}/>
      <Route exact path="/todos/:id" component={TodosEdit} />
    </Switch>
  </main>
)

export default Main

===== app.js =====

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

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

===== TodosContext.js =====

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

===== reducer.js =====

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
    }
}

===== Todos.js =====

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

function Todos(){   
    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
    }
    return(
        <div>
            <h1>List of ToDos</h1>
            <h4>{title}</h4>
            <ul>
                {state.todos.map(todo => (
                    <li key={todo.id}>{todo.text} &nbsp;
                        <button onClick={()=>{
                            editRow(todo)}}>
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    )
}

export default Todos;
9
WD1

React-Redux und Connected-React-Router verwenden ...

import {useDispatch } from 'react-redux';
import { Push } from 'connected-react-router';

export default () => {
 const dispatch = useDispatch();

 return (
   <Button onClick={() => dispatch(Push('/login'))}>
     Login
   </Button>    
  );
};
0
Sten Muchow