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

Question

大纲：

我目前正在努力学习 react/redux/router。作为一个练习项目，我正在开发一个基本的 contact/client 管理应用程序。在使用 react-router-doms Redirect 组件时。我无法让 back/forward 导航按预期工作。

详情：

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

单击 <tr key={d._id} onClick={()=>this.setState({ id: d._id })}> 将 state.id 更改为 clientID 的唯一值。这导致 Redirect 在 tables 渲染方法中为真，触发 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 reducer 管理多个值。一旦我这样做，我会用适当的方法更新问题。

Answer 1

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

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

来自文档：

<Redirect/>

push: bool

When true, redirecting will push a new entry onto the history instead of replacing the current one.

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

React-router-dom and Redirect not being added to history?

reactjs

redux

react-router-dom