React-router-dom和Redirect没有被添加到历史记录中？

Question

大纲:

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

细节:

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

单击<tr key={d._id} onClick={()=>this.setState({ id: d._id })}>更改state.id为clientIDs唯一值.这导致在Redirect表render方法中为true,触发了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我查看过的所有先前的网址.

我试过<tr>在路由器<Link to={}>标签中包装,但它破坏了样式.

警告:(this.state.id)

我知道我应该Redux用来保存this.state.id我的重定向功能的值.我还没有完全掌握如何使用单个redux减速器管理多个值.我会用适当的方法更新问题.

Answer 1

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

<Redirect push to={"/contacts/card/"+this.state.id}/>

来自文档:

<Redirect/>

推:布尔

如果为true,重定向将把新条目推送到历史记录而不是替换当前的条目.