分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用React Router v4的React Hooks-如何重定向到另一条路由？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用React Router v4的React Hooks-如何重定向到另一条路由？？

开发过程中遇到使用React Router v4的React Hooks-如何重定向到另一条路由？的问题如何解决？下面主要结合日常开发的经验，给出你关于使用React Router v4的React Hooks-如何重定向到另一条路由？的解决方法建议，希望对你解决使用React Router v4的React Hooks-如何重定向到另一条路由？有所启发或帮助；

您的问题与使用react-router-v4（而非钩子）以编程方式进行导航有关，

在react- router-v4中，如果Todos组件以子代或Route的形式呈现，则可以从props获取历史记录，或者从Route呈现的祖先那里获得Router的历史记录，并将它传递Router的props。但是，它没有收到路由器道具，您可以使用withRouterHOC从中react- router获取路由器道具并进行呼叫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(
        <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 withRouter(Todos);

解决方法

我有一个简单的react hooks应用程序-Todos列表-使用react router v4

在待办事项列表上，单击待办事项时，我需要：

在上下文中调度当前待办事项
重定向到另一条路线（从/ todos到/ todos /：id）

在以前的基于React Class的实现中，我可以使用this.context.history.push重定向到另一条路由。

我将如何结合使用React Hooks和React Router v4来处理该问题（在下面的代码中，请参见我在函数editRow（）中的注释）？

代码如下：

===== 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',{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;