React、Redux - 在创建对象后重定向(在 URL 中使用新的对象 ID) [英] React, Redux - redirect after object is created (using new object id in URL)

问题描述

我想我有一个很常见的问题，但找不到我确信是好的做法的最新答案.

I think I have a quite common problem, but can't find up to date answer that I would be sure is good practice.

我正在使用 React、Redux、React Router DOM 编写一个论坛应用程序.我正在使用 BrowserRouter.

I'm writing a forum app using React, Redux, React Router DOM. I'm using BrowserRouter.

这是我想要做的:在我发布创建线程的请求并得到满足后，我想将用户重定向到新创建的线程页面(我需要对象 ID，我将在响应 URL 时获得该 ID).

Here is what I want to do: after I post a request to create a thread and it is fulfilled, I want to redirect user to newly created thread page (I need object id that I will get in response for URL).

组件

class CreateThread extends React.Component {

  handleCreateThread = (values) => {
    this.props.createThread(values);

  [...more code...]
}

操作

export const createThread = (data) => async dispatch => {
  try {
    const response = await instance().post('/api/threads/', data);
    // const { id, category } = response.data;
    // history.push(`/categories/${category.id}/threads/${id}`);
    dispatch({ type: types.CREATE_THREAD_FULFILLED, payload: response.data })
  } catch(err) {
    dispatch({ type: types.CREATE_THREAD_ERRORS, payload: err.response.data })
  }
};

最好的方法是什么?我认为重定向内部操作是最简单的.这是好的做法吗?在这种情况下如何访问历史对象?(动作代码中的注释部分不起作用，我无法像那样访问历史对象).我正在寻找答案，但我发现许多不是最新的或相互矛盾的，我很困惑.

What is the best way to do it? I think it would be easiest to redirect inside actions. Is it good practice? How can I access history object in this case? (The commented part in the code in actions does not work, I can't access history object like that). I was searching for an answer but I found many that are not up-to-date or contradictory and I'm very confused.

------------编辑-----------

------------EDIT----------

所以我遵循了 Ahmad Nawaz Khan 的建议，但是当我尝试在 action creator 中访问 history.push 时出现错误 TypeError: "_routing__WEBPACK_IMPORTED_MODULE_3__.default.push is not a function"

So I have followed an advice of Ahmad Nawaz Khan, but when trying to access history.push inside action creator I'm getting an error TypeError: "_routing__WEBPACK_IMPORTED_MODULE_3__.default.push is not a function"

// routing/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();

// routing/index.js
import { Router } from 'react-router-dom';
import history from './history';

const Routing = (props) => {
  return (
    <Router history={history}>
      ...

// redux/actions/index.js
import history from '../../routing';

export const createThread = (data) => async dispatch => {
  try {
    const response = await instance().post('/api/threads/', data);    
    const { id, category } = response.data;
    history.push(`/categories/${category.id}/threads/${id}`);
    dispatch({ type: types.CREATE_THREAD_FULFILLED, payload: response.data })
  } catch(err) {
    ...

"历史": "^4.10.1","react-router-dom": "^5.1.2",反应":^16.12.0"

"history": "^4.10.1", "react-router-dom": "^5.1.2", "react": "^16.12.0"

推荐答案

如果你已经创建了一个自定义的历史对象，那么你就不能使用 BrowserRouter，你必须使用 Router，它的工作原理类似于 BrowerRouter，只是它需要自定义一个历史对象.

If you have created a custom history object then you cannot use BrowserRouter, you have to use Router instead, which works similar to the BrowerRouter except that it takes custom a history object.

创建一个历史对象(如果没有创建)

create a history object (if not created)

//history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();

将 BrowerRouter 更改为路由器

Change BrowerRouter to Router

import Router from "react-router-dom";

导入历史对象并将其传递给路由器(如果您尚未将历史对象传递给路由器，history.push 将无法工作.)

Import and pass the history object to the Router (history.push wouldn't work if you haven't passed the history object to the router.)

import history from "./history.js"
...
<Router history={history}>

现在您可以从动作创建者或 CreateThread 组件重定向用户.是的，从动作创建者重定向用户是一个很好的做法，但如果你想从 CreateThread 组件中这样做，那么你必须从 createThread 动作创建者返回一个承诺.

Now you can either redirect a user from the action creator or CreateThread component. And yes it's a good practice to redirect a user from action creator but if you want to do that from CreateThread component then you would have to return a promise from the createThread action creator.

这篇关于React、Redux - 在创建对象后重定向(在 URL 中使用新的对象 ID)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！