Question

单击react-router <NavLink />组件时出现问题。当前，单击该按钮可导航到正确的页面，但redux中未触发任何操作。

历史记录对象更新。我知道是因为后退/前进按预期进行（redux-logger中的射击动作）。

这是剥离的代码：

import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';

import NavMenu from './NavMenu';

const Nav = () => {

  return (
    <aside>
      <NavMenu />
      <NavFooter>
        <NavLink to={`/terms-and-conditions`}> // Not firing redux-logger actions, but navigates to the correct page
          Terms and conditions
        </NavLink>
      </NavFooter>
    </aside>
  );
};

export default connect()(Nav);

首次加载时，当按下浏览器的后退/前进按钮时，redux logger中的路由会发生变化：

action @@router/LOCATION_CHANGE // console.log

我到处都是，找不到我是否需要执行自定义操作或使用connected-react-router。

帮助表示赞赏

Answer 1

很明显，除了<Router />外，我还<Switch />包装了<ConnectedRouter />。

如果要将路由连接到redux存储并反映redux-logger中更改的路由，则只需要<ConnectedRouter />即可，

<ConnectedRouter history={history}>
    <Nav />
    <Switch>
       <Route path="/" exact component={Home} />
       <Route path="/about-the-cause" exact component={About} />
       <Redirect to="/" />
    </Switch>
</ConnectedRouter>

<navlink>不会触发@@ router / LOCATION_CHANGE操作

1 个答案: