React，Redux - 创建对象后重定向（使用 URL 中的新对象 ID）

Question

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

我正在使用 React、Redux、React Router DOM 编写一个论坛应用程序。我正在使用浏览器路由器。

这是我想要做的：在我发布创建线程的请求并完成后，我想将用户重定向到新创建的线程页面（我需要我将获得的对象 ID 以响应 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 })
  }
};

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

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

所以我听从了 Ahmad Nawaz Khan 的建议，但是在尝试访问 history.push 内部动作创建者时，我收到了一个错误 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”

Answer 1

History.js

import createHistory from 'history/createHashHistory';
export default createHistory()

Action.js

import history from './history'
history.push('/send to my new page');

Answer 2

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

创建一个历史对象（如果没有创建）

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

将浏览器路由器更改为路由器

import Router from "react-router-dom";

导入历史对象并将其传递给路由器（如果您没有将历史对象传递给路由器，history.push 将不起作用。）

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

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

Answer 3

查看您的导入和文件使用情况，我发现这里的问题只是导入不正确。

您已将历史记录定义为在 history.js 文件中，但是您尝试从 routing/index.js 导入它

更新您的历史导入，它应该适合您

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

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) {
    ...