Question

概要

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

详细信息：

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

点击<tr key={d._id} onClick={()=>this.setState({ id: d._id })}>会将state.id更改为clientID的唯一值。这导致表格渲染方法中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个网址。

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

警告：（this.state.id）

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

Answer 1

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

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

来自文档：

<Redirect/>

推送：bool

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

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

1 个答案: