我正在寻找一种当React-Router v4 +更改位置时修改页面标题的方法。我曾经在Redux中侦听位置更改操作，然后针对某个metaData对象检查该路由。

使用React-Router v4 +时，没有固定的路由列表。实际上，站点周围的各种组件都可以使用Route相同的路径字符串。这意味着我使用的旧方法将不再起作用。

当某些主要路线发生更改时，是否可以通过调用操作来更新页面标题，还是有更好的更好的方法来更新网站的元数据？

之前也有人问过类似的问题，但这似乎是针对connected-react-router. 我可以使用Routeror BrowserRouterfromreact-router(-dom)并且没有问题，但我想合并 Redux 因此使用这个包。

应用程序.js

import React, { Component } from "react";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
// import { Router, Route, Switch } from "react-router-dom";
import { Route, Switch } from "react-router";

// Routes
// import routes from "./js/routes";

// Components
import PimberlyLogin from "./js/containers/PimberlyLogin";
import CognitoLogin from "./js/containers/CognitoLogin";
import CognitoChangePassword from "./js/views/CognitoChangePassword";
import ListGroups from "./js/containers/ListGroups";
import VerificationCode from "./js/views/VerificationCode";

// Auth component …

我正在尝试使用 React 应用程序测试工作流。当所有字段都填满工作流程步骤时，用户可以单击“下一步”按钮。此操作在减速器中注册状态并更改 URL 以转到下一个工作流程步骤。

根据 RTL 文档，我使用此功能将测试中的组件包装在商店提供程序和连接的路由器中：

export const renderWithRedux = (ui: JSX.Element, initialState: any = {}, route: string = "/") => {
  // @ts-ignore
  const root = reducer({}, { type: "@@INIT" })
  const state = mergeDeepRight(root, initialState)

  const store = createStoreWithMiddleWare(reducer, state)
  const history = createMemoryHistory({ initialEntries: [route]})

  const Wrapper = ({ children }: any) => (
    <Provider store={store}>
      <ConnectedRouter history={history}>{children}</ConnectedRouter>
    </Provider>
  )
  return {
    ...render(ui, { wrapper: Wrapper }),
    // adding `store` to the returned utilities …

当导航到路由的动作被触发时，动作会触发一个新状态，其中router.location.pathname根据浏览器的history.

另一个属性也发生了变化：router.location.key, 到一个新的随机字符串。

即使路径名本身没有改变（从页面本身点击一个页面的链接），它key仍然会更新。

key物业的目的是什么？在哪些情况下，我希望我自己的状态随机生成key，哪些更新会在非常动作分派时进行？为什么它不是一个简单递增的数字？

我正在尝试以编程方式推送 URL 以使用 react-router、redux 和 connected-react-router 进行导航

单击<Link />按钮时，效果很好，URL 和路线也在变化。

但是当使用 a 时dispatch(push(url))，URL 只会改变而内容不会更新

我在这里做了一个最小的例子。

任何帮助将不胜感激，

谢谢

我有一个 React Web 应用程序，它使用 redux、connected-react-router、redux saga 和 redux persist 以及带有 React-hot-loader 和 webpack 的 HMR。对大多数软件包进行重大更新后，我注意到传奇故事没有输入/执行。

相关包的当前版本为： "react": "^16.7.0", "react-redux": "^6.0.0", "redux": "^4.0.1", "redux-persist": “5.6.12”，“redux-saga”：“^1.0.1”，“react-hot-loader”：“^4.6.5”，“connected-react-router”：“^6.2.2”，“ webpack": "^4.29.3"。

我已尝试将 HMR 实现从 v4 恢复到较低版本，但我相信这是有效的。我还认为这可能是连接反应路由器实现，但我现在对此也很有信心（但我将展示两者以供参考）。我猜这是我的 redux 存储配置的问题，但我想如果我知道我就不会寻求帮助。

index.js 文件（应用程序入口点）

import React from 'react';
import ReactDOM from 'react-dom';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import App from './components/App';
import store, { persistor } from './store/config';

const render = (Component) => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Component />
      </PersistGate> …

我在 React 18 上尝试在我的测试项目中安装connected-react-router 时遇到了问题：npm 安装失败并出现错误：

npm 错误！发现：react@18.1.0

npm 错误！节点模块/反应

npm 错误！来自根项目的react@“^18.1.0”

npm 错误！npm 错误！无法解决依赖关系

npm 错误！来自connected-react-router@6.9.2 或类似包的peer react@"^16.4.0 || ^17.0.0"

我在存储库中connected-react-router找到了信息：

v6.0.0 需要 React v16.4.0 和 React Redux v6.0 / v7.0。

所以，我有疑问：1）connected-react-router 是否维护？最后一次提交的日期是 7 个月前；2）React 18项目中是否有类似的连接路由器的包？或者 React 18 中添加了任何内置功能？

当然，手动将 React 路由器连接到 Redux 存储一点也不困难，但我对现成的解决方案感兴趣。我也一直在搜索该主题，但找不到任何信息。预先感谢您的答复。

我已经在文档中设置了我的应用程序：

步骤1

...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
...
const history = createBrowserHistory()

const store = createStore(
  connectRouter(history)(rootReducer), // new root reducer with router state
  initialState,
  compose(
    applyMiddleware(
      routerMiddleware(history), // for dispatching history actions
      // ... other middlewares ...
    ),
  ),
)

第2步

...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4
import { ConnectedRouter } …

连接的 React Router 导出类型RouterState非常好！但是我没有看到match. 假设这些也可以导入并添加到减速器中，例如在RouterState下面和减速器中使用：

https://github.com/supasate/connected-react-router/blob/master/examples/typescript/src/reducers/index.ts#L13

const rootReducer = (history: History) => combineReducers({
  count: counterReducer,
  router: connectRouter(history)

})

export interface State {
  count: number
  router: RouterState
}

没有它，你就不能真正this.props.match在连接的组件中使用它来匹配参数等。对于那些使用 TypeScript 并且还需要添加到 reducer 的人，这里有解决方法吗？还是我在这里遗漏了一个关键部分？非常感谢！

我正在尝试使用connected-react-router模块。

从文档中，这是我在减速器中的代码：

import { combineReducers } from 'redux';
import login from './loginReducer';
import { connectRouter } from 'connected-react-router'

export default (history) => combineReducers({
  router: connectRouter(history),
  login
});

我在编译时收到此错误：

./node_modules/connected-react-router/esm/ConnectedRouter.js 模块未找到：无法解析“C:\Users\ericn\Documents\ReactJS\test\node_modules\connected-react-router”中的“react-redux” \esm'

我一直在寻找这个一段时间，但似乎没有人有同样的问题。

有什么想法吗？

反应路由器工作正常。但是，如果我添加<Redirect>或调用 from <Link>，则会出现以下异常：

Uncaught 在状态树中找不到router reducer，必须挂载在“router”下

rootReducer.js：

    import { combineReducers } from 'redux';
    import { connectRouter } from 'connected-react-router';
    import counterReducer from './Counter/counter.reducer';
    import sidebarReducer from './Sidebar/sidebar.reducer';

    export default (history) => combineReducers({
        router: connectRouter(history),
        counter: counterReducer,
        sidebar: sidebarReducer,
    });

商店.js：

    import { createBrowserHistory } from 'history';
    import { applyMiddleware, compose, createStore } from 'redux';
    import { routerMiddleware } from 'connected-react-router';
    import createRootReducer from './rootReducer';

    export const history = createBrowserHistory();

    export default function configureStore(preloadedState) {
        const composeEnhancer = …