代码之家 › 专栏 › 技术社区 › yotke

<NavLink/>不会触发@@router/LOCATION\u更改操作

connected-react-router react-router redux reactjs javascript

yotke · 技术社区 · 6 年前

<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

我到处都找了,找不到我是否需要做一个自定义操作或使用连接的路由器。

感谢您的帮助

1 回复 | 直到 6 年前

yotke 6 年前

显然,我有 <Router /> <Switch /> 除了 <ConnectedRouter />

如果您想将路由连接到redux存储并在redux logger中反映路由的变化,您只需要 < 像这样:

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

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

2 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

2 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

2 年前

Ancross · 链接未路由到组件

2 年前