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

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 &quot;{this.key}&quot;.</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."
        }
      }}
    />