React-router-dom 和 Redirect 未添加到历史记录中？

Posted 2023-02-22

【中文标题】React-router-dom 和 Redirect 未添加到历史记录中？

【英文标题】：React-router-dom and Redirect not being added to history?

【发布时间】：2018-07-21 17:19:24

【问题描述】：

大纲：

我目前正在努力学习react/redux/router。作为一个实践项目，我正在开发一个基本的联系人/客户管理应用程序。在使用react-router-doms Redirect 组件时。我无法让后退/前进导航按预期工作。

详情：

我有一个表，其中包含位于 /contacts/ 的条目列表，当您单击其中一个表行时，我想使用 <tr>s onClick 属性设置的值来 Redirect。

点击<tr key=d._id onClick=()=>this.setState( id: d._id )> 会将state.id 更改为clientIDs 的唯一值。这会导致 Redirect 在表格渲染方法中为真，从而触发 Redirect。

render()  // render method of '/contacts/' Contacts component
    return(
        ... // table head
         this.state.id && <Redirect to="/contacts/card/"+this.state.id/> 
        ...// table content
    )

这是位于父App.js的路由器

render() 
    return (
        <BrowserRouter basename="/" >
            <div>
                <NavBar/>
                <main>
                    <Switch>
                        <Route exact path="/" component=Login/>
                        <Route 
                            exact path="/contacts" component=Contacts/>
                        <Route
                            exact
                            path="/contacts/card/:clientID" component=ContactCard/>
                    </Switch>
                </main>
            </div>
        </BrowserRouter>
    );

问题：

重定向后，如果您从/contacts/card/:clientID 单击返回按钮，浏览器不会返回到/contacts/。相反，它会循环访问我查看过的任何以前的 :clientID URL。

我尝试将<tr> 包装在路由器<Link to=> 标记中，但它破坏了样式。

警告： (this.state.id)

我知道我应该使用Redux 来为我的重定向功能保存this.state.id 的值。我还没有完全掌握如何使用单个 redux reducer 管理多个值。一旦我这样做了，我会用适当的方法更新问题。

【参考方案1】：

找到了答案，我需要像这样将push 添加到我的<Redirect/> 组件中。

<Redirect push to=`/contacts/card/$this.state.id`/>

来自文档：

<Redirect/>

推：布尔

如果为 true，重定向会将新条目推送到历史记录中，而不是替换当前条目。

【讨论】：

谢谢你 - 让我头疼了好几个小时。