React Hooks与React Router v4 - 如何重定向到另一个路由？

Question

我有一个简单的React Hooks应用程序 - 一个Todo列表 - 并使用React Router v4。

在Todo列表中，当点击Todo时，我需要：

1. 在上下文中调度当前的todo
2. 重定向到另一个路由（从/todos到/todos/:id）

在以前的基于React类的实现中，我可以使用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'));

=====主要.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;

- WD1

Answer 1

实际上比其他答案要简单得多，React Router v5.1 提供了一个 useHistory hook。

import React from 'react'
import { useHistory } from 'react-router-dom'

const MyComponent = () => {
  const history = useHistory()
  const handleButtonClick = (event) => {
    history.push(event.target.value)
  }
  return (
    <button
      type="button"
      value="/my/path"
      onClick={handleButtonClick}
    >
      Navigate Me!
    </button>
  )
}

- Lynden Noye

---

我认为实际上是v5.1引入了这个功能：https://reacttraining.com/blog/react-router-v5-1/ - jmargolisvt

是的，你说得对！我已经在我的回答中更新了版本。 - Lynden Noye

history.push('/') 仍将用户发送到页面的旧版本，您仍需要将其放入 useEffect 中并为其提供一个变量以检查更改，或通过 props 将 props.history.push('/') 提供给您的 history，其中 props 会传递到函数组件中。 - to240

Answer 2

你的问题与使用 hooks 相比，与 react-router-v4 的程序化导航有关。

在 react-router-v4 中，如果 Todos 组件被渲染为子元素或从一个祖先元素 render form Route 传递了 Router props，则可以从 props 中获取 history。但是由于它没有接收到 Router props，因此您可以使用来自 react-router 的 withRouter HOC 来获取路由器 props 并调用 `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);

- Shubham Khatri

---

谢谢您的及时回复！这指引我朝着正确的方向探索在React类组件和React函数组件中访问React Router props。需要补充一点的是，由于<Route>本身提供了{history，match，location} props，如果路由已经定义并且位于主要级别，则不需要使用withRouter HOC。这些props可以直接访问。但是，如果组件嵌套层次很深，则withRouter HOC会变得有用。 - WD1

我已经写了一篇关于这个的文章：https://dev.to/httpjunkie/programmatically-redirect-in-react-with-react-router-and-hooks-3hej，这里还有一个代码沙盒示例：https://6wo1673y2r.codesandbox.io/。可能会有帮助！ - Eric Bishard

React日志给人一种递归状态更新的感觉，导致组件被卸载然后再次挂载，但最终历史记录在状态持久化之前卸载了组件，这太奇怪了。 - user7075574

@EricBishard 我已经寻找了几个小时，像你在文章中建议的那样简单的东西。我认为你应该在这里发布它作为一个答案。 - kroiz

Answer 3

您可以使用UseNavigate来移动更改页面。以下是示例示例。

"react-router-dom": "^6.2.1",

// Route File
import React, { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import IndexLayout from "../layouts";
import NotFoundPage from "../views/404";
import Loader from "../components/Loader";

const Dashboard = lazy(() => import("../containers/DashboardContainer"));

const Router = () => {
  return (
    <BrowserRouter>
      <IndexLayout> // this one is kind of HOC
        <Routes>
          <Route
            path="/"
            element={
              <Suspense fallback={<Loader />}>
                <Dashboard />
              </Suspense>
            }
          />

</end every thing>
// any component

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const TestComponent = ({ newSignup }) => {
    const navigate = useNavigate();
    
    useEffect(() => {
        if (newSignup) {
          navigate("/login");
        }
      }, [newSignup]);
    return (
        <div>
            
        </div>
    )
}

export default TestComponent

- agravat.in

---

对于那些错过了"^6.2.1"的人 - 在能够导入useNavigate之前，您需要将React Router升级到版本6。请参阅文档以获取更多信息：https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory - Logan Cundiff

Answer 4

使用react-redux和connected-react-router...

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

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

 return (
   <Button onClick={() => dispatch(push('/login'))}>
     Login
   </Button>    
  );
};

- Sten Muchow

---

我在使用钩子之前，一切都设置正确，旧的使用组件类的方法也可以工作。但是一旦我切换到这种方法，就会出现错误“Uncaught Could not find router reducer in state tree, it must be mounted under "router"”。 - mjwrazor