为什么<Link>和<Redirect>在connected-react-router中不触发state.router的更新?

时间:2019-06-27 02:05:33

标签: react-router connected-react-router

仔细研究了将redux与react-router结合使用的各种软件包之后,似乎connected-react-router是最受欢迎的受积极支持的选择。

我几乎完全按照docs的方式配置了它,但以下描述了一个例外。

我遇到的问题是反应路由器<Redirect>确实会重定向,但不会更新state.router.location。 Codesandbox MNWE为here。 [编辑:我刚发布<Link>时遇到了同样的问题,并在原始{and}的slight modification中进行了说明。抱歉,如果我刚从那里开始的话会更清楚,但是我需要睡一会!]

在下面的示例中,有3条路线。第一个匹配根“ /”。第二个匹配简单的URL,例如“ / anything”,默认匹配“ / anything / else”。 <Where>是一个小组件,显示其text属性,然后显示state.router.location.pathname

 <Switch>
    <Route exact path="/">
        <Where text="Root" />
    </Route>
    <Route exact path="/:thing">
        <Where text="Exact" />
    </Route>
    <Route>
    <Redirect to="/" />
    </Route>
</Switch>

到达时,您会看到“ Root:/”。如果在地址栏中添加“ / anything”,则会看到“精确:/ anything”。如果在地址栏中输入“ / anything / else”,则地址栏将重定向回根目录,而<Switch>返回到根目录,但是您看到的不是“ Root:/”,而是“根目录:/ anything / else”。记录器确认,尽管手动输入的URL会触发state更新,但<Redirect>不会。

也许我认为应该这样做是错误的,但是我没有看到它以一种或另一种方式被记录下来。我想我犯了一些配置错误?

[我描述的配置例外是我没有在应用程序中使用combineReducers,我有一个化简器,我将其称为appRootReducer(在此示例中为空)。所以我写了一个createRootReducer包装器。它运作良好,足以完成对state.router的基本更新。]

希望您能提供帮助!

1 个答案:

答案 0 :(得分:0)

A!在Github存储库中搜索已关闭的问题时,我发现自己留在了<BrowswerRouter>标签中。

  
      
  • ConnectedRouter包装您的react-router v4 / v5路由,并传递history对象作为道具。记住删除任何使用   BrowserRouterNativeRouter留在遗嘱中   cause   problems   同步状态。
  •