'You tried to redirect to the same route you're currently on: "/"' when using a Redirect component with state - node.js

Question

I'm trying to create a small demo application with two pages, one and two. The user may navigate from page one to page two by pressing a button, but only if the location objects' state in the second page contains a key attribute. If it does not, then the user is redirected to one.
The problem I'm encountering is that when using a to object to redirect from one and pass state to two, React Router warns:
You tried to redirect to the same route you're currently on: "/"
This doesn't make sense to me, because I'm attempting to redirect the user from /one to /two, not / to /two.
App.js
import React, { Component } from 'react';
import './App.css';
import { NavLink, Redirect, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
const App = () => (
<Router>
<div className="App">
<ul>
<li>
<NavLink to="/one">One</NavLink>
</li>
<li>
<NavLink to="/two">Two</NavLink>
</li>
</ul>
<Switch>
<Route path="/one" component={One} />
<Route path="/two" component={Two} />
</Switch>
</div>
</Router>
);
class One extends Component {
constructor(props) {
super(props);
this.state = {
shouldRedirect: false,
};
this.redirect = this.redirect.bind(this);
}
redirect() {
this.setState({
shouldRedirect: true,
});
}
render() {
const { shouldRedirect } = this.state;
if (shouldRedirect) {
return (
// Replacing the below Redirect with the following corrects the error,
// but then I'm unable to pass state to the second page.
// <Redirect to="/two" />
<Redirect
to={{
pathName: '/two',
state: {
key: 'Some data.',
},
}}
/>
);
}
return (
<div>
<h3>This is the first page.</h3>
<button type="button" onClick={this.redirect}>Click me to go to page two.</button>
</div>
);
}
}
class Two extends Component {
constructor(props) {
super(props);
this.state = {
shouldRedirect: false,
};
this.redirect = this.redirect.bind(this);
}
componentWillMount() {
const { location } = this.props;
if (location.state && location.state.key) {
const { key } = location.state;
this.key = key;
} else {
this.redirect();
}
}
redirect() {
this.setState({
shouldRedirect: true,
});
}
render() {
const { shouldRedirect } = this.state;
if (shouldRedirect) {
return (
<div>
<p>You&apos;re being redirected to the first page because a key was not provided.</p>
<Redirect to="/one" />
</div>
);
}
return (
<div>
<h3>This is the second page.</h3>
<p>The key you provided was "{this.key}".</p>
</div>
);
}
}
export default App;
App.css
.App {
text-align: center;
}

Answer 1

You are passing pathName instead of pathname. This should fix the issue.
Working example on code sandbox.
<Redirect
to={{
pathname: "/two",
state: {
key: "Some data."
}
}}
/>

Answer 2

You should not use the <Redirect> as an another route in the <switch>. It should be condition driver. Use the below link for the reference.
https://reacttraining.com/react-router/web/example/auth-workflow