尝试设置 redux 历史记录，以便我可以重定向

Posted 2023-02-22

【中文标题】尝试设置 redux 历史记录，以便我可以重定向

【英文标题】：Trying to setup redux history so I can redirect

【发布时间】：2018-08-05 04:09:00

【问题描述】：

我正在尝试关注这个 react router redux，以便可以在我的组件或操作中使用 push('/') 进行重定向。

教程：https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

我不确定我错过了什么，但我收到了一个错误。

我在 chrome 控制台中遇到的错误是：

bundle.js:3090 警告：React.createElement：类型无效 -- 期望一个字符串（对于内置组件）或一个类/函数（对于 复合组件）但得到：未定义。您可能忘记导出 你的组件来自它定义的文件，或者你可能混合了 设置默认和命名导入。

检查Root的渲染方法。 在根 printWarning @ bundle.js:3090

bundle.js:2684 未捕获错误：元素类型无效：预期为 字符串（用于内置组件）或类/函数（用于复合 组件）但得到：未定义。您可能忘记导出您的 来自定义它的文件中的组件，或者您可能混淆了 默认和命名导入。

bundle.js:20893 组件出现上述错误： 在 Provider 中（由 Root 创建） 在根目录中

index.js

import React from 'react';
import  render  from 'react-dom';
import  createStore, combineReducers, applyMiddleware, compose  from 'redux'
import  routerReducer, routerMiddleware, push  from 'react-router-redux'
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';

import reducers from './reducers';
import Root from './root';

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
let middleware = [thunk, routerMiddleware(history)]

const store = createStore(
  combineReducers(
    ...reducers,
    router: routerReducer
  ),
  applyMiddleware(...middleware)
);

render(
  <Root store=store history=history />,
  document.getElementById('app')
);

root.js

import React from 'react';
import PropTypes from 'prop-types';
import 
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
 from 'react-router-dom';
import  ConnectedRouter  from 'react-router-redux';
import  Provider  from 'react-redux';
import App from './components/app';

const Root = ( store, history ) => (
  <Provider store=store>
    <ConnectedRouter history=history>
      <div className="application-container">
      <App>
        <Switch>
        </Switch>
      </App>
      </div>
    </ConnectedRouter>
  </Provider>
);

Root.propTypes = 
  store: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
;

export default Root;

/reducers/index.js

import  combineReducers  from 'redux';
import users from './users';

const reducers = combineReducers(
  users,
);

export default reducers;

users.js

import Constants from '../constants';

const initialState = 
  users: [],
  fetching: false,
;

const users = (state = initialState, action) => 
  switch (action.type) 
    case Constants.LOADING_USERS:
      return ...state, fetching: true;
    default:
      return state;
  
;

export default users;

我的 package.json 部门：

  "devDependencies": 
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-display-name": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "colors": "^1.1.2",
    "compression": "^1.7.1",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "eslint-watch": "^3.1.3",
    "express": "^4.16.2",
    "jest": "^22.0.6",
    "node-sass": "^4.7.2",
    "npm-run-all": "^4.1.2",
    "redux-devtools": "^3.4.1",
    "sass-loader": "^6.0.6",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.10.1",
    "webpack-hot-middleware": "^2.21.0"
  ,
  "dependencies": 
    "axios": "^0.17.1",
    "history": "^4.7.2",
    "lodash": "^4.17.5",
    "moment": "^2.20.1",
    "react": "^16.2.0",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  ,

【问题讨论】：

App组件导入正确吗？？

@ShubhamKhatri 是的，在我尝试使用 ConnectedRouter 设置历史记录之前，这一切正常。

“./users”文件中有什么内容？

你不应该在这里使用ConnectedSwitch吗？喜欢github.com/ReactTraining/react-router/blob/master/packages/…

@Chaitanya 我用那个用户文件更新了我的问题。它只是一个减速器。

【参考方案1】：

这可能是依赖不匹配的问题。该存储库还提到了一些关于此的内容：

这个 (react-router-redux 5.x) 是 react-router-redux 的版本 与 react-router 4.x 一起使用。 react-router 2.x 和 3.x 的用户想要 使用在遗留存储库中找到的 react-router-redux。

Here 是一个工作代码框集，react-router-redux 5.x 和 react-router 4.x 用于同一教程。

更新：似乎您使用的是react-router-redux 4.x，这可能会导致错误。 This沙盒使用v4.x并抛出错误

【讨论】：

@TarunLalwani 它不会在我的操作中使用 push 进行重定向。

我也有沙盒没有的 thunk，也许这会导致我将其全部连接起来的方式出现问题。

如果你能设置一个repo我可以看看

您的演示没有使用“推送”重定向到另一个页面，感到困惑吗？

您可以添加store.dispatch(push('/about'))，它会起作用:)

【参考方案2】：

如果您不进行服务器端渲染，请在您的 root.js 中使用 BrowserRouter（参见上文）。这是在 react-router-dom 包内。

import  BrowserRouter  from 'react-router-dom'

只有在进行服务器端渲染时，我才会在 root.js 文件中使用 ConnectedRouter（来自 react-router-redux）。在这种情况下，当发生 Hydrate（在 index.js 中）时，不会抛出错误和警告。

或 请试试这个。使用 ConnectedSwitch 更正您的路由，如下例所示：

const AppContainer = () => (
      <ConnectedSwitch>
        <Route exact path="/" component=() => (<h1>Home <Link to="/about">About</Link></h1>) />
        <Route path="/about" component=() => (<h1>About <Link to="/">Home</Link></h1>) />
      </ConnectedSwitch>
    )

const App = connect(state => (
  location: state.location,
))(AppContainer)

render(
  <Provider store=store>
    <ConnectedRouter history=history>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
)

我愿意讨论。问候。