大纲:
我目前正在尝试学习react/redux/router
。作为一个实践项目,我正在开发一个基本的联系人/客户管理应用程序。使用react路由器dom
sRedirect
组件时。我无法使后退/前进导航按预期工作
详细信息:
我有一个表,其中包含位于/contacts/
的条目列表,当您单击其中一个表行时,我想使用设置的值
重定向
;tr>s onClick属性
单击<;tr key={d.\u id}onClick={()=>;this.setState({id:d.\u id})}>
将state.id
更改为clientID
s唯一值。这将导致表呈现方法中的重定向
为true,从而触发重定向
render(){//render方法的'/contacts/'{contacts}组件
返回(
…//桌头
{this.state.id&;&;<;重定向到={”//contacts/card/“+this.state.id}/>;}
…//表内容
)
}
这是位于父App.js
render(){
返回(
<;BrowserRouter basename=“/”>;
<;div>;
<;导航栏/>;
<;主>;
<;开关>;
<;路由精确路径=“/”组件={Login}/>;
<;路线
精确路径=“/contacts”组件={contacts}/>;
<;路线
准确的
path=“/contacts/card/:clientID”组件={ContactCard}/>;
<;/Switch>;
<;/main>;
<;/div>;
<;/BrowserRouter>;
);
}
问题:
重定向后,如果单击/contacts/card/:clientID
中的后退按钮,浏览器不会返回到/contacts/
。取而代之的是,它在我所看到的任何以前的:clientID
URL中循环
我已尝试包装<;tr>
<;链接到={}>标记,但它破坏了样式
警告:(this.state.id
)
我知道我应该使用Redux
来保存重定向函数的this.state.id
值。我还没有完全掌握如何用一个redux reducer管理多个值。一旦我这样做了,我会用适当的方法更新这个问题
找到答案后,我需要将推送
添加到我的<;重定向/>这样的组件
<;将推送重定向到={`/contacts/card/${this.state.id}`/>;
从文档中:
<;重定向/>
推送:bool
如果为true,重定向将在历史记录上推送一个新条目,而不是替换当前条目