React-router-dom and Redirect not being added to history? : <p><strong>Outline:</strong></p>

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

<p><strong>Details:</strong></p>

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

<p>The click on <code>&lt;tr key={d._id} onClick={()=&gt;this.setState({ id: d._id })}&gt;</code> changes <code>state.id</code> to the <code>clientID</code>s unique value. This results in a <code>Redirect</code> being true in the tables render method, triggering the <code>Redirect</code>.</p>

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

<p>This is the router which is located in the parent <code>App.js</code></p>

<pre><code>render() {
    return (
        &lt;BrowserRouter basename="/" &gt;
            &lt;div&gt;
                &lt;NavBar/&gt;
                &lt;main&gt;
                    &lt;Switch&gt;
                        &lt;Route exact path="/" component={Login}/&gt;
                        &lt;Route 
                            exact path="/contacts" component={Contacts}/&gt;
                        &lt;Route
                            exact
                            path="/contacts/card/:clientID" component={ContactCard}/&gt;
                    &lt;/Switch&gt;
                &lt;/main&gt;
            &lt;/div&gt;
        &lt;/BrowserRouter&gt;
    );
}
</code></pre>

<p><strong>Question:</strong></p>

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

<p>I have tried wrapping the <code>&lt;tr&gt;</code> in a router <code>&lt;Link to={}&gt;</code> tag, but it destroyed styles.</p>

<p><strong>Caveat:</strong> (<code>this.state.id</code>)</p>

<p>I know that I should be using <code>Redux</code> to hold the value of <code>this.state.id</code> 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.</p>
