React-router-dom 和 Redirect 没有被添加到历史记录中? [英] React-router-dom and Redirect not being added to history?

问题描述

大纲:

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

详情:

我有一个表，其中包含位于 /contacts/ 的条目列表，当您单击表行之一时，我想使用值集 Redirect通过 的 onClick 属性.

点击this.setState({ id: d._id })}> 改变state.id 到 clientID 的唯一值.这会导致表渲染方法中的 Redirect 为真，从而触发 Redirect.

render() {//'/contacts/' {Contacts} 组件的渲染方法返回(...//表头{ this.state.id &&<重定向到={"/contacts/card/"+this.state.id}/>}...//表格内容)}

这是位于父App.js

中的路由器

render() {返回 (<BrowserRouter basename="/" ><div><导航栏/><主要><开关><路由精确路径="/" component={Login}/><路线精确路径=/联系人"组件={联系人}/><路线精确的path="/contacts/card/:clientID" component={ContactCard}/></开关></main>

</BrowserRouter>);}

问题:

重定向后，如果您单击 /contacts/card/:clientID 中的后退按钮，浏览器不会返回到 /contacts/.相反，它会循环浏览我查看过的任何以前的 :clientID URL.

我曾尝试将 包装在路由器 标签中，但它破坏了样式.

警告:(this.state.id)

我知道我应该使用 Redux 来保存重定向函数的 this.state.id 的值.我还没有完全掌握如何使用单个 redux reducer 管理多个值.一旦我这样做，我会用适当的方法更新问题.

解决方案

找到了答案，我需要将 push 添加到我的 组件中，例如所以.

<重定向推送到={`/contacts/card/${this.state.id}`}/>

来自文档:

<块引用>

<重定向/>

推:布尔

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

Outline:

I'm currently trying to learn react/redux/router. As a practice project, I'm working on a basic contact/client management app. While using react-router-doms Redirect component. I can't get the back/forward navigation to work as expected.

Details:

I have a table with a list of entries located at /contacts/ and when you click on one of the table rows, I want to Redirect using a value set by the <tr>s onClick attribute.

The click on <tr key={d._id} onClick={()=>this.setState({ id: d._id })}> changes state.id to the clientIDs unique value. This results in a Redirect being true in the tables render method, triggering the Redirect.

render() { // render method of '/contacts/' {Contacts} component
    return(
        ... // table head
        { this.state.id && <Redirect to={"/contacts/card/"+this.state.id}/> }
        ...// table content
    )
}

This is the router which is located in the parent 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>
    );
}

Question:

After the redirect, if you click the back button from /contacts/card/:clientID, the browser doesn't go back to /contacts/. instead, it cycles through any previous :clientID URLs that I've looked at.

I have tried wrapping the <tr> in a router <Link to={}> tag, but it destroyed styles.

Caveat: (this.state.id)

I know that I should be using Redux to hold the value of this.state.id for my redirect function. I haven't fully grasped how to mange multiple values with a single redux reducer yet. I will update question with the appropriate method once I do.

解决方案

Found the answer, I needed to add push to my <Redirect/> component like so.

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

From the docs:

<Redirect/>

push: bool

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

这篇关于React-router-dom 和 Redirect 没有被添加到历史记录中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！