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

Question

大纲:

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

详细信息:

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

点击<tr key={d._id} onClick={()=>this.setState({ id: d._id })}>变化state.id到clientID的独特值(value)。这导致 Redirect在表渲染方法中为 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 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.