'Вы пытались перенаправить на тот же маршрут, на котором находитесь в данный момент: "/" при использовании компонента Redirect с состоянием

Question

Я пытаюсь создать небольшое демонстрационное приложение с двумя страницами, one и two.Пользователь может перейти от страницы one к странице two, нажав кнопку, но только если состояние объектов местоположения на второй странице содержит атрибут key.Если это не так, то пользователь перенаправляется на one.

. Проблема, с которой я сталкиваюсь, заключается в том, что при использовании для объекта для перенаправления с one и передачи состояния наtwo, React Router предупреждает:

Вы пытались перенаправить на тот же маршрут, на котором находитесь в данный момент: "/"

Это не имеет смысла дляя, потому что я пытаюсь перенаправить пользователя с /one на /two, а не / на /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

Вы передаете pathName вместо pathname.Это должно исправить проблему.
Рабочий пример на кодовой песочнице .

<Redirect
      to={{
        pathname: "/two",
        state: {
          key: "Some data."
        }
      }}
    />

Answer 2

Не следует использовать <Redirect> в качестве другого маршрута в <switch>. Это должно быть состояние водителя. Используйте ссылку ниже для справки.

https://reacttraining.com/react-router/web/example/auth-workflow